ऐडवांस मार्कर की मदद से, कस्टम एचटीएमएल और सीएसएस का इस्तेमाल करके, ज़्यादा विज़ुअल इफ़ेक्ट वाले मार्कर बनाए जा सकते हैं. इनमें इंटरैक्टिविटी और ऐनिमेशन की सुविधा होती है. सभी AdvancedMarkerElement इंस्टेंस को एचटीएमएल एलिमेंट के तौर पर डीओएम में जोड़ा जाता है. इन्हें element प्रॉपर्टी के ज़रिए ऐक्सेस किया जा सकता है. साथ ही, इनमें बदलाव करने का तरीका भी अन्य डीओएम एलिमेंट जैसा ही होता है. AdvancedMarkerElement एक DOM एलिमेंट है. इसलिए, डिफ़ॉल्ट मार्कर पर सीधे तौर पर सीएसएस स्टाइल लागू की जा सकती हैं. साथ ही, एचटीएमएल और सीएसएस का इस्तेमाल करके, कस्टम मार्कर पूरी तरह से नए सिरे से बनाए जा सकते हैं.
सिंपल एचटीएमएल मार्कर
इस उदाहरण मैप में, सामान्य कस्टम एचटीएमएल मार्कर बनाने का तरीका दिखाया गया है:
सोर्स देखना
नीचे दिए गए उदाहरण में, एक नया DIV एलिमेंट बनाने, DIV को सीएसएस क्लास और टेक्स्ट कॉन्टेंट असाइन करने, और फिर DIV को AdvancedMarkerElement में जोड़ने का तरीका दिखाया गया है:
TypeScript
const mapElement = document.querySelector('gmp-map')!; async function init() { // Request needed libraries. const [{ AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary('marker'), google.maps.importLibrary('maps'), ]); const priceTag = document.createElement('div'); priceTag.className = 'price-tag'; priceTag.textContent = '$2.5M'; const marker = new AdvancedMarkerElement({ position: { lat: 37.42, lng: -122.1 }, }); marker.append(priceTag); mapElement.append(marker); } void init();
JavaScript
const mapElement = document.querySelector('gmp-map'); async function init() { // Request needed libraries. const [{ AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary('marker'), google.maps.importLibrary('maps'), ]); const priceTag = document.createElement('div'); priceTag.className = 'price-tag'; priceTag.textContent = '$2.5M'; const marker = new AdvancedMarkerElement({ position: { lat: 37.42, lng: -122.1 }, }); marker.append(priceTag); mapElement.append(marker); } void init();
सीएसएस
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ gmp-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; transform: translateY(-8px); } .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; }
एचटीएमएल
<html>
<head>
<title>Advanced Marker Simple HTML</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<script>
// prettier-ignore
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
});
</script>
</head>
<body>
<gmp-map
center="37.42,-122.1"
zoom="14"
map-id="4504f8b37365c3d0"></gmp-map>
</body>
</html>सैंपल आज़माएं
इंटरैक्टिव मार्कर
इस उदाहरण में, इंटरैक्टिव मार्कर का एक सेट बनाने का तरीका दिखाया गया है. इन मार्कर पर क्लिक करने पर, काल्पनिक जानकारी दिखती है. इस उदाहरण में, ज़्यादातर फ़ंक्शन सीएसएस में शामिल हैं.
सोर्स देखना
TypeScript
async function init() { // Request needed libraries. const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary('maps'), google.maps.importLibrary('marker'), ]); const center = { lat: 37.43238031167444, lng: -122.16795397128632 }; const map = new Map(document.getElementById('map')!, { zoom: 11, center, mapId: '4504f8b37365c3d0', }); for (const property of properties) { const advancedMarkerElement = new AdvancedMarkerElement({ map, content: buildContent(property), position: property.position, title: property.description, }); advancedMarkerElement.addListener('click', () => { toggleHighlight(advancedMarkerElement); }); } } interface Property { address: string; description: string; price: string; type: string; bed: number; bath: number; size: number; position: google.maps.LatLngLiteral; } function toggleHighlight(markerView: google.maps.marker.AdvancedMarkerElement) { const content = markerView.children[0]; if (content.classList.contains('highlight')) { content.classList.remove('highlight'); markerView.zIndex = null; } else { content.classList.add('highlight'); markerView.zIndex = 1; } } function buildContent(property: 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: Property[] = [ { 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, }, }, ]; void init();
JavaScript
async function init() { // Request needed libraries. const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary('maps'), google.maps.importLibrary('marker'), ]); const center = { lat: 37.43238031167444, lng: -122.16795397128632 }; const map = new Map(document.getElementById('map'), { zoom: 11, center, mapId: '4504f8b37365c3d0', }); for (const property of properties) { const advancedMarkerElement = new AdvancedMarkerElement({ map, content: buildContent(property), position: property.position, title: property.description, }); advancedMarkerElement.addListener('click', () => { toggleHighlight(advancedMarkerElement); }); } } function toggleHighlight(markerView) { const content = markerView.children[0]; if (content.classList.contains('highlight')) { content.classList.remove('highlight'); markerView.zIndex = null; } else { content.classList.add('highlight'); markerView.zIndex = 1; } } 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, }, }, ]; void init();
सीएसएस
: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; transform: translateY(-9px); } .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>
<head>
<title>Advanced Markers with HTML</title>
<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>
<script>
// prettier-ignore
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>सैंपल आज़माएं
ऐनिमेशन वाले मार्कर
इस उदाहरण में, सीएसएस और ऐडवांस मार्कर का इस्तेमाल करके, पारंपरिक "बाउंस-ड्रॉप" ऐनिमेशन बनाया गया है. IntersectionObserver में, यह drop सीएसएस स्टाइल जोड़ता है. IntersectionObserverयह देखता है कि हर मार्कर कब व्यूपोर्ट में दिखता है और स्टाइल जोड़ता है. इसके बाद, animationend फ़ंक्शन ने हर मार्कर में जो animationend इवेंट लिसनर जोड़ा था वह स्टाइल को हटा देता है.createMarker()
सोर्स देखना
TypeScript
/** * Returns a random lat lng position within the map bounds. */ function getRandomPosition(map: google.maps.Map): google.maps.LatLngLiteral { 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 intersectionObserver = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting) { entry.target.classList.add('drop'); intersectionObserver.unobserve(entry.target); } } }); async function init(): Promise<void> { // Request needed libraries. const [ { Map }, { event, ControlPosition }, { AdvancedMarkerElement, PinElement }, ] = await Promise.all([ google.maps.importLibrary('maps'), google.maps.importLibrary('core'), google.maps.importLibrary('marker'), ]); const position = { lat: 37.4242011827985, lng: -122.09242296450893 }; const map = new Map(document.getElementById('map')!, { zoom: 14, center: position, mapId: '4504f8b37365c3d0', }); // Create 100 markers to animate. event.addListenerOnce(map, 'idle', () => { for (let i = 0; i < 100; i++) { createMarker(map, AdvancedMarkerElement, PinElement); } }); // 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 recreating the map. refreshMap(); }); controlDiv.appendChild(controlUI); map.controls[ControlPosition.TOP_CENTER].push(controlDiv); } function createMarker( map: google.maps.Map, AdvancedMarkerElement: typeof google.maps.marker.AdvancedMarkerElement, PinElement: typeof google.maps.marker.PinElement ) { const content = new PinElement(); new AdvancedMarkerElement({ position: getRandomPosition(map), map, content, }); content.style.opacity = '0'; content.addEventListener('animationend', () => { content.classList.remove('drop'); content.style.opacity = '1'; }); const time = 2 + Math.random(); // 2s delay for easy to see the animation content.style.setProperty('--delay-time', time + 's'); intersectionObserver.observe(content); } 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); void init(); } void init();
JavaScript
/** * Returns a random lat lng position within the map bounds. */ 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 intersectionObserver = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting) { entry.target.classList.add('drop'); intersectionObserver.unobserve(entry.target); } } }); async function init() { // Request needed libraries. const [ { Map }, { event, ControlPosition }, { AdvancedMarkerElement, PinElement }, ] = await Promise.all([ google.maps.importLibrary('maps'), google.maps.importLibrary('core'), google.maps.importLibrary('marker'), ]); const position = { lat: 37.4242011827985, lng: -122.09242296450893 }; const map = new Map(document.getElementById('map'), { zoom: 14, center: position, mapId: '4504f8b37365c3d0', }); // Create 100 markers to animate. event.addListenerOnce(map, 'idle', () => { for (let i = 0; i < 100; i++) { createMarker(map, AdvancedMarkerElement, PinElement); } }); // 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 recreating the map. refreshMap(); }); controlDiv.appendChild(controlUI); map.controls[ControlPosition.TOP_CENTER].push(controlDiv); } function createMarker(map, AdvancedMarkerElement, PinElement) { const content = new PinElement(); new AdvancedMarkerElement({ position: getRandomPosition(map), map, content, }); content.style.opacity = '0'; content.addEventListener('animationend', () => { content.classList.remove('drop'); content.style.opacity = '1'; }); const time = 2 + Math.random(); // 2s delay for easy to see the animation content.style.setProperty('--delay-time', time + 's'); intersectionObserver.observe(content); } 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); void init(); } void init();
सीएसएस
/* * 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: 0.5s; } #map { height: 100%; } #mapContainer { height: 100%; } @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); }
एचटीएमएल
<html>
<head>
<title>Advanced Markers CSS Animation</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<script>
// prettier-ignore
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
});
</script>
</head>
<body>
<div id="mapContainer">
<div id="map" style="height: 100%"></div>
</div>
</body>
</html>