高级标记支持使用自定义 HTML 和 CSS 来创建具有高度视觉影响力的标记，这些标记具有交互功能和动画效果。所有高级标记实例都作为 HTML 元素添加到 DOM 中，这些元素可通过 AdvancedMarkerView 实例的 element 属性进行访问，并且操控方式与任何其他 DOM 元素相同。由于高级标记是 DOM 元素，因此您可以直接将 CSS 样式应用于默认标记，并完全使用 HTML 和 CSS 从头开始创建自定义标记。
简单的 HTML 标记
以下地图示例展示了如何创建简单的自定义 HTML 标记：
查看源代码
以下示例展示了如何创建新的 DIV 元素，向 DIV 分配 CSS 类和文本内容，然后将 DIV 作为 AdvancedMarkerView.content 的值进行传递：
TypeScript
function initMap() {
const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
center: { lat: 37.42, lng: -122.1 },
zoom: 14,
mapId: '4504f8b37365c3d0',
});
const priceTag = document.createElement('div');
priceTag.className = 'price-tag';
priceTag.textContent = '$2.5M';
const markerView = new google.maps.marker.AdvancedMarkerView({
map,
position: { lat: 37.42, lng: -122.1 },
content: priceTag,
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.42, lng: -122.1 },
zoom: 14,
mapId: "4504f8b37365c3d0",
});
const priceTag = document.createElement("div");
priceTag.className = "price-tag";
priceTag.textContent = "$2.5M";
const markerView = new google.maps.marker.AdvancedMarkerView({
map,
position: { lat: 37.42, lng: -122.1 },
content: priceTag,
});
}
window.initMap = initMap;
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/* HTML marker styles */
.price-tag {
background-color: #4285F4;
border-radius: 8px;
color: #FFFFFF;
font-size: 14px;
padding: 10px 15px;
position: relative;
}
.price-tag::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, 0);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #4285F4;
}
[class$=api-load-alpha-banner] {
display: none;
}
HTML
<html>
<head>
<title>Advanced Marker Simple HTML</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
defer
></script>
</body>
</html>
试用示例
交互式标记
以下示例展示了如何创建一组互动式标记，在鼠标悬停时显示虚构信息。该示例中的大部分功能都包含在 CSS 中。
查看源代码
TypeScript
function initMap() {
const center = {
lat: 37.43238031167444,
lng: -122.16795397128632,
};
const map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
zoom: 11,
center,
mapId: "4504f8b37365c3d0",
});
for (const property of properties) {
const advancedMarkerView = new google.maps.marker.AdvancedMarkerView({
map,
content: buildContent(property),
position: property.position,
title: property.description,
});
const element = advancedMarkerView.element as HTMLElement;
["focus", "pointerenter"].forEach((event) => {
element.addEventListener(event, () => {
highlight(advancedMarkerView, property);
});
});
["blur", "pointerleave"].forEach((event) => {
element.addEventListener(event, () => {
unhighlight(advancedMarkerView, property);
});
});
advancedMarkerView.addListener("click", (event) => {
unhighlight(advancedMarkerView, property);
});
}
}
function highlight(markerView, property) {
markerView.content.classList.add("highlight");
markerView.element.style.zIndex = 1;
}
function unhighlight(markerView, property) {
markerView.content.classList.remove("highlight");
markerView.element.style.zIndex = "";
}
function buildContent(property) {
const content = document.createElement("div");
content.classList.add("property");
content.innerHTML = `
<div class="icon">
<i aria-hidden="true" class="fa fa-icon fa-${property.type}" title="${property.type}"></i>
<span class="fa-sr-only">${property.type}</span>
</div>
<div class="details">
<div class="price">${property.price}</div>
<div class="address">${property.address}</div>
<div class="features">
<div>
<i aria-hidden="true" class="fa fa-bed fa-lg bed" title="bedroom"></i>
<span class="fa-sr-only">bedroom</span>
<span>${property.bed}</span>
</div>
<div>
<i aria-hidden="true" class="fa fa-bath fa-lg bath" title="bathroom"></i>
<span class="fa-sr-only">bathroom</span>
<span>${property.bath}</span>
</div>
<div>
<i aria-hidden="true" class="fa fa-ruler fa-lg size" title="size"></i>
<span class="fa-sr-only">size</span>
<span>${property.size} ft<sup>2</sup></span>
</div>
</div>
</div>
`;
return content;
}
const properties = [{
address: '215 Emily St, MountainView, CA',
description: 'Single family house with modern design',
price: '$ 3,889,000',
type: 'home',
bed: 5,
bath: 4.5,
size: 300,
position: {
lat: 37.50024109655184,
lng: -122.28528451834352,
},
}, {
address: '108 Squirrel Ln 🐿, Menlo Park, CA',
description: 'Townhouse with friendly neighbors',
price: '$ 3,050,000',
type: 'building',
bed: 4,
bath: 3,
size: 200,
position: {
lat: 37.44440882321596,
lng: -122.2160620727,
},
},
{
address: '100 Chris St, Portola Valley, CA',
description: 'Spacious warehouse great for small business',
price: '$ 3,125,000',
type: 'warehouse',
bed: 4,
bath: 4,
size: 800,
position: {
lat: 37.39561833718522,
lng: -122.21855116258479,
},
}, {
address: '98 Aleh Ave, Palo Alto, CA',
description: 'A lovely store on busy road',
price: '$ 4,225,000',
type: 'store-alt',
bed: 2,
bath: 1,
size: 210,
position: {
lat: 37.423928529779644,
lng: -122.1087629822001,
},
}, {
address: '2117 Su St, MountainView, CA',
description: 'Single family house near golf club',
price: '$ 1,700,000',
type: 'home',
bed: 4,
bath: 3,
size: 200,
position: {
lat: 37.40578635332598,
lng: -122.15043378466069,
},
}, {
address: '197 Alicia Dr, Santa Clara, CA',
description: 'Multifloor large warehouse',
price: '$ 5,000,000',
type: 'warehouse',
bed: 5,
bath: 4,
size: 700,
position: {
lat: 37.36399747905774,
lng: -122.10465384268522,
},
}, {
address: '700 Jose Ave, Sunnyvale, CA',
description: '3 storey townhouse with 2 car garage',
price: '$ 3,850,000',
type: 'building',
bed: 4,
bath: 4,
size: 600,
position: {
lat: 37.38343706184458,
lng: -122.02340436985183,
},
}, {
address: '868 Will Ct, Cupertino, CA',
description: 'Single family house in great school zone',
price: '$ 2,500,000',
type: 'home',
bed: 3,
bath: 2,
size: 100,
position: {
lat: 37.34576403052,
lng: -122.04455090047453,
},
}, {
address: '655 Haylee St, Santa Clara, CA',
description: '2 storey store with large storage room',
price: '$ 2,500,000',
type: 'store-alt',
bed: 3,
bath: 2,
size: 450,
position: {
lat: 37.362863347890716,
lng: -121.97802139023555,
},
}, {
address: '2019 Natasha Dr, San Jose, CA',
description: 'Single family house',
price: '$ 2,325,000',
type: 'home',
bed: 4,
bath: 3.5,
size: 500,
position: {
lat: 37.41391636421949,
lng: -121.94592071575907,
},
}];
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
function initMap() {
const center = {
lat: 37.43238031167444,
lng: -122.16795397128632,
};
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center,
mapId: "4504f8b37365c3d0",
});
for (const property of properties) {
const advancedMarkerView = new google.maps.marker.AdvancedMarkerView({
map,
content: buildContent(property),
position: property.position,
title: property.description,
});
const element = advancedMarkerView.element;
["focus", "pointerenter"].forEach((event) => {
element.addEventListener(event, () => {
highlight(advancedMarkerView, property);
});
});
["blur", "pointerleave"].forEach((event) => {
element.addEventListener(event, () => {
unhighlight(advancedMarkerView, property);
});
});
advancedMarkerView.addListener("click", (event) => {
unhighlight(advancedMarkerView, property);
});
}
}
function highlight(markerView, property) {
markerView.content.classList.add("highlight");
markerView.element.style.zIndex = 1;
}
function unhighlight(markerView, property) {
markerView.content.classList.remove("highlight");
markerView.element.style.zIndex = "";
}
function buildContent(property) {
const content = document.createElement("div");
content.classList.add("property");
content.innerHTML = `
<div class="icon">
<i aria-hidden="true" class="fa fa-icon fa-${property.type}" title="${property.type}"></i>
<span class="fa-sr-only">${property.type}</span>
</div>
<div class="details">
<div class="price">${property.price}</div>
<div class="address">${property.address}</div>
<div class="features">
<div>
<i aria-hidden="true" class="fa fa-bed fa-lg bed" title="bedroom"></i>
<span class="fa-sr-only">bedroom</span>
<span>${property.bed}</span>
</div>
<div>
<i aria-hidden="true" class="fa fa-bath fa-lg bath" title="bathroom"></i>
<span class="fa-sr-only">bathroom</span>
<span>${property.bath}</span>
</div>
<div>
<i aria-hidden="true" class="fa fa-ruler fa-lg size" title="size"></i>
<span class="fa-sr-only">size</span>
<span>${property.size} ft<sup>2</sup></span>
</div>
</div>
</div>
`;
return content;
}
const properties = [
{
address: "215 Emily St, MountainView, CA",
description: "Single family house with modern design",
price: "$ 3,889,000",
type: "home",
bed: 5,
bath: 4.5,
size: 300,
position: {
lat: 37.50024109655184,
lng: -122.28528451834352,
},
},
{
address: "108 Squirrel Ln 🐿, Menlo Park, CA",
description: "Townhouse with friendly neighbors",
price: "$ 3,050,000",
type: "building",
bed: 4,
bath: 3,
size: 200,
position: {
lat: 37.44440882321596,
lng: -122.2160620727,
},
},
{
address: "100 Chris St, Portola Valley, CA",
description: "Spacious warehouse great for small business",
price: "$ 3,125,000",
type: "warehouse",
bed: 4,
bath: 4,
size: 800,
position: {
lat: 37.39561833718522,
lng: -122.21855116258479,
},
},
{
address: "98 Aleh Ave, Palo Alto, CA",
description: "A lovely store on busy road",
price: "$ 4,225,000",
type: "store-alt",
bed: 2,
bath: 1,
size: 210,
position: {
lat: 37.423928529779644,
lng: -122.1087629822001,
},
},
{
address: "2117 Su St, MountainView, CA",
description: "Single family house near golf club",
price: "$ 1,700,000",
type: "home",
bed: 4,
bath: 3,
size: 200,
position: {
lat: 37.40578635332598,
lng: -122.15043378466069,
},
},
{
address: "197 Alicia Dr, Santa Clara, CA",
description: "Multifloor large warehouse",
price: "$ 5,000,000",
type: "warehouse",
bed: 5,
bath: 4,
size: 700,
position: {
lat: 37.36399747905774,
lng: -122.10465384268522,
},
},
{
address: "700 Jose Ave, Sunnyvale, CA",
description: "3 storey townhouse with 2 car garage",
price: "$ 3,850,000",
type: "building",
bed: 4,
bath: 4,
size: 600,
position: {
lat: 37.38343706184458,
lng: -122.02340436985183,
},
},
{
address: "868 Will Ct, Cupertino, CA",
description: "Single family house in great school zone",
price: "$ 2,500,000",
type: "home",
bed: 3,
bath: 2,
size: 100,
position: {
lat: 37.34576403052,
lng: -122.04455090047453,
},
},
{
address: "655 Haylee St, Santa Clara, CA",
description: "2 storey store with large storage room",
price: "$ 2,500,000",
type: "store-alt",
bed: 3,
bath: 2,
size: 450,
position: {
lat: 37.362863347890716,
lng: -121.97802139023555,
},
},
{
address: "2019 Natasha Dr, San Jose, CA",
description: "Single family house",
price: "$ 2,325,000",
type: "home",
bed: 4,
bath: 3.5,
size: 500,
position: {
lat: 37.41391636421949,
lng: -121.94592071575907,
},
},
];
window.initMap = initMap;
CSS
:root {
--building-color: #FF9800;
--house-color: #0288D1;
--shop-color: #7B1FA2;
--warehouse-color: #558B2F;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
width: 100%;
}
/*
* Property styles in unhighlighted state.
*/
.property {
align-items: center;
background-color: #FFFFFF;
border-radius: 50%;
color: #263238;
display: flex;
font-size: 14px;
gap: 15px;
height: 30px;
justify-content: center;
padding: 4px;
position: relative;
position: relative;
transition: all 0.3s ease-out;
width: 30px;
}
.property::after {
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 9px solid #FFFFFF;
content: "";
height: 0;
left: 50%;
position: absolute;
top: 95%;
transform: translate(-50%, 0);
transition: all 0.3s ease-out;
width: 0;
z-index: 1;
}
.property .icon {
align-items: center;
display: flex;
justify-content: center;
color: #FFFFFF;
}
.property .icon svg {
height: 20px;
width: auto;
}
.property .details {
display: none;
flex-direction: column;
flex: 1;
}
.property .address {
color: #9E9E9E;
font-size: 10px;
margin-bottom: 10px;
margin-top: 5px;
}
.property .features {
align-items: flex-end;
display: flex;
flex-direction: row;
gap: 10px;
}
.property .features > div {
align-items: center;
background: #F5F5F5;
border-radius: 5px;
border: 1px solid #ccc;
display: flex;
font-size: 10px;
gap: 5px;
padding: 5px;
}
/*
* Property styles in highlighted state.
*/
.property.highlight {
background-color: #FFFFFF;
border-radius: 8px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
height: 80px;
padding: 8px 15px;
width: auto;
}
.property.highlight::after {
border-top: 9px solid #FFFFFF;
}
.property.highlight .details {
display: flex;
}
.property.highlight .icon svg {
width: 50px;
height: 50px;
}
.property .bed {
color: #FFA000;
}
.property .bath {
color: #03A9F4;
}
.property .size {
color: #388E3C;
}
/*
* House icon colors.
*/
.property.highlight:has(.fa-house) .icon {
color: var(--house-color);
}
.property:not(.highlight):has(.fa-house) {
background-color: var(--house-color);
}
.property:not(.highlight):has(.fa-house)::after {
border-top: 9px solid var(--house-color);
}
/*
* Building icon colors.
*/
.property.highlight:has(.fa-building) .icon {
color: var(--building-color);
}
.property:not(.highlight):has(.fa-building) {
background-color: var(--building-color);
}
.property:not(.highlight):has(.fa-building)::after {
border-top: 9px solid var(--building-color);
}
/*
* Warehouse icon colors.
*/
.property.highlight:has(.fa-warehouse) .icon {
color: var(--warehouse-color);
}
.property:not(.highlight):has(.fa-warehouse) {
background-color: var(--warehouse-color);
}
.property:not(.highlight):has(.fa-warehouse)::after {
border-top: 9px solid var(--warehouse-color);
}
/*
* Shop icon colors.
*/
.property.highlight:has(.fa-shop) .icon {
color: var(--shop-color);
}
.property:not(.highlight):has(.fa-shop) {
background-color: var(--shop-color);
}
.property:not(.highlight):has(.fa-shop)::after {
border-top: 9px solid var(--shop-color);
}
HTML
<html>
<head>
<title>Advanced Markers with HTML</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://use.fontawesome.com/releases/v6.2.0/js/all.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
defer
></script>
</body>
</html>
试用示例
动画标记
在以下示例中，我们使用 CSS 和高级标记创建了传统的“跳出”动画。在 interactionObserver 中，添加了 drop CSS 样式。Intersection Observer 会看到各个标记何时进入视口，并添加样式。相应样式将由 animationend 事件监听器移除，该监听器已添加到 createMarker() 函数的每个标记中，如下例所示。
查看源代码
TypeScript
/**
* Returns a random lat lng position within the map bounds.
* @param {!google.maps.Map} map
* @return {!google.maps.LatLngLiteral}
*/
function getRandomPosition(map) {
const bounds = map.getBounds();
const minLat = bounds.getSouthWest().lat();
const minLng = bounds.getSouthWest().lng();
const maxLat = bounds.getNorthEast().lat();
const maxLng = bounds.getNorthEast().lng();
const latRange = maxLat - minLat;
// Note: longitude can span from a positive longitude in the west to a
// negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large
// span that covers the whole USA.
let lngRange = maxLng - minLng;
if (maxLng < minLng) {
lngRange += 360;
}
return {
lat: minLat + Math.random() * latRange,
lng: minLng + Math.random() * lngRange,
};
}
const total = 100;
const intersectionObserver = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add('drop');
intersectionObserver.unobserve(entry.target);
}
}
});
function initMap() {
const position = { lat: 37.4242011827985, lng: -122.09242296450893 };
const map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
zoom: 14,
center: position,
mapId: '4504f8b37365c3d0',
});
// Create 100 markers to animate.
google.maps.event.addListenerOnce(map, 'idle', () => {
for (let i = 0; i < 100; i++) {
createMarker(map);
}
});
// Add a button to reset the example.
const controlDiv = document.createElement("div");
const controlUI = document.createElement("button");
controlUI.classList.add("ui-button");
controlUI.innerText = "Reset the example";
controlUI.addEventListener("click", () => {
// Reset the example by reloading the map iframe.
refreshMap();
});
controlDiv.appendChild(controlUI);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
}
function createMarker(map) {
const advancedMarkerView = new google.maps.marker.AdvancedMarkerView({
position: getRandomPosition(map),
map: map,
});
const element = advancedMarkerView.content as HTMLElement;
element.style.opacity = '0';
element.addEventListener('animationend', (event) => {
element.classList.remove('drop');
element.style.opacity = '1';
});
const time = 2 + Math.random(); // 2s delay for easy to see the animation
element.style.setProperty('--delay-time', time +'s');
intersectionObserver.observe(element);
}
function refreshMap() {
// Refresh the map.
const mapContainer = document.getElementById('mapContainer');
const map = document.getElementById('map');
map!.remove();
const mapDiv = document.createElement('div');
mapDiv.id = 'map';
mapContainer!.appendChild(mapDiv);
initMap();
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
/**
* Returns a random lat lng position within the map bounds.
* @param {!google.maps.Map} map
* @return {!google.maps.LatLngLiteral}
*/
function getRandomPosition(map) {
const bounds = map.getBounds();
const minLat = bounds.getSouthWest().lat();
const minLng = bounds.getSouthWest().lng();
const maxLat = bounds.getNorthEast().lat();
const maxLng = bounds.getNorthEast().lng();
const latRange = maxLat - minLat;
// Note: longitude can span from a positive longitude in the west to a
// negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large
// span that covers the whole USA.
let lngRange = maxLng - minLng;
if (maxLng < minLng) {
lngRange += 360;
}
return {
lat: minLat + Math.random() * latRange,
lng: minLng + Math.random() * lngRange,
};
}
const total = 100;
const intersectionObserver = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("drop");
intersectionObserver.unobserve(entry.target);
}
}
});
function initMap() {
const position = { lat: 37.4242011827985, lng: -122.09242296450893 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: position,
mapId: "4504f8b37365c3d0",
});
// Create 100 markers to animate.
google.maps.event.addListenerOnce(map, "idle", () => {
for (let i = 0; i < 100; i++) {
createMarker(map);
}
});
// Add a button to reset the example.
const controlDiv = document.createElement("div");
const controlUI = document.createElement("button");
controlUI.classList.add("ui-button");
controlUI.innerText = "Reset the example";
controlUI.addEventListener("click", () => {
// Reset the example by reloading the map iframe.
refreshMap();
});
controlDiv.appendChild(controlUI);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
}
function createMarker(map) {
const advancedMarkerView = new google.maps.marker.AdvancedMarkerView({
position: getRandomPosition(map),
map: map,
});
const element = advancedMarkerView.content;
element.style.opacity = "0";
element.addEventListener("animationend", (event) => {
element.classList.remove("drop");
element.style.opacity = "1";
});
const time = 2 + Math.random(); // 2s delay for easy to see the animation
element.style.setProperty("--delay-time", time + "s");
intersectionObserver.observe(element);
}
function refreshMap() {
// Refresh the map.
const mapContainer = document.getElementById("mapContainer");
const map = document.getElementById("map");
map.remove();
const mapDiv = document.createElement("div");
mapDiv.id = "map";
mapContainer.appendChild(mapDiv);
initMap();
}
window.initMap = initMap;
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/* set the default transition time */
:root {
--delay-time: .5s;
}
#map {
height: 100%;
}
#mapContainer {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
@keyframes drop {
0% {
transform: translateY(-200px) scaleY(0.9);
opacity: 0;
}
5% {
opacity: 0.7;
}
50% {
transform: translateY(0px) scaleY(1);
opacity: 1;
}
65% {
transform: translateY(-17px) scaleY(0.9);
opacity: 1;
}
75% {
transform: translateY(-22px) scaleY(0.9);
opacity: 1;
}
100% {
transform: translateY(0px) scaleY(1);
opacity: 1;
}
}
.drop {
animation: drop 0.3s linear forwards var(--delay-time);
}
.ui-button {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
height: 40px;
cursor: pointer;
}
.ui-button:hover {
background: rgb(235, 235, 235);
}
[class$=api-load-alpha-banner] {
display: none;
}
HTML
<html>
<head>
<title>Advanced Markers CSS Animation</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="mapContainer">
<div id="map" style="height: 100%"></div>
</div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
defer
></script>
</body>
</html>