Scribd
Upload
4 views

Animate a marker using CSS  _  Maps JavaScript API  _  Google for Developers-

This document provides an example of animating a marker using CSS with the Google Maps JavaScript API, specifically showcasing a 'bounce-drop' animation. It explains the use of IntersectionObserver to apply and remove CSS styles as markers enter the viewport, and includes a sample code for creating and managing multiple animated markers on a map. Additionally, it offers instructions for running the sample application locally using Git and Node.js.

Uploaded by

h2oo2h
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Animate a marker using CSS  _  Maps JavaScript API  _  Google for Developers-

This document provides an example of animating a marker using CSS with the Google Maps JavaScript API, specifically showcasing a 'bounce-drop' animation. It explains the use of IntersectionObserver to apply and remove CSS styles as markers enter the viewport, and includes a sample code for creating and managing multiple animated markers on a map. Additionally, it offers instructions for running the sample application locally using Git and Node.js.

Uploaded by

h2oo2h
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

2025. 05. 23.

7:48 Animate a marker using CSS | Maps JavaScript API | Google for Developers

Animate a marker using CSS

This example creates the traditional "bounce-drop" animation using CSS and advanced
markers. In the IntersectionObserver, it adds the drop CSS style. The
IntersectionObserversees when each marker enters the viewport, and adds the style.
Then, the animationend event listener that the createMarker() function added to each
marker removes the style.

Read the documentation (/maps/documentation/javascript/advanced-markers/html-markers).

Reset the example

Térképadatok ©2025 Google Térképhiba bejelentése

TypeScript (#typescript)JavaScriptCSS (#css)HTML (#html)


(#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();

https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-animation 1/4
2025. 05. 23. 7:48 Animate a marker using CSS | Maps JavaScript API | Google for Developers

const maxLng = bounds.getNorthEast().lng();


const latRange = maxLat - minLat;
// Note: longitude can span from a positive longitude in the west to
// negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is
// 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);
}
}
});
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.impo
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.
google.maps.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 reloading the map iframe.
refreshMap();
});

https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-animation 2/4
2025. 05. 23. 7:48 Animate a marker using CSS | Maps JavaScript API | Google for Developers

controlDiv.appendChild(controlUI);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv
}
function createMarker(map, AdvancedMarkerElement, PinElement) {
const pinElement = new PinElement();
const content = pinElement.element;
const advancedMarker = new AdvancedMarkerElement({
position: getRandomPosition(map),
map: map,
content: content,
});
content.style.opacity = '0';
content.addEventListener('animationend', (event) => {
content.classList.remove('drop');
content.style.opacity = '1';
});
const time = 2 + Math.random(); // 2s delay for easy to see the anim
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);
initMap();
}
initMap();
96ae2638d3fb4dfe506bbb6f/dist/samples/advanced-markers-animation/docs/index.js#L8-L96)

star Note: The JavaScript is compiled from the TypeScript snippet.

Try Sample

JSFiddle.net…

Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions
(https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM.

https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-animation 3/4
2025. 05. 23. 7:48 Animate a marker using CSS | Maps JavaScript API | Google for Developers

The following commands clone, install dependencies and start the sample application.

$ git clone https://github.com/googlemaps-samples/js-api-samples.git


$ cd samples/advanced-markers-animation
$ npm i
$ npm start

https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-animation 4/4

You might also like