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
