To add multiple locations to a Google Map, load the Maps JavaScript API and its marker library, create a map with a map ID, then create an AdvancedMarkerElement for each location and associate it with the map. jQuery is optional: it can help iterate location data or coordinate page readiness, but the marker objects come from Google’s Maps API.
What you need before adding markers
- A Google Cloud project with billing enabled and an API key or OAuth token. Google Maps Platform charges depend on the request type and applicable SKU; do not assume every map load is free. See Google Maps Platform usage and billing.
- The Maps JavaScript API enabled for your project.
- A map ID. Google permits
DEMO_MAP_IDfor testing; use a map ID from your own project in production. - A map container with a defined height so it can be displayed on the page.
Google’s current setup guide explains the API and map ID requirements at Set up an advanced marker.
Add markers programmatically
This approach suits pages where your application creates or updates markers from data. Load both libraries with google.maps.importLibrary(), wait for them to resolve, create the map, and then create markers with a position and map reference.
<div id="map"></div>
<script>
async function initMap() {
const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
google.maps.importLibrary("maps"),
google.maps.importLibrary("marker")
]);
const map = new Map(document.getElementById("map"), {
center: { lat: 37.422, lng: -122.084 },
zoom: 12,
mapId: "DEMO_MAP_ID"
});
const locations = [
{ title: "Location one", lat: 37.422, lng: -122.084 },
{ title: "Location two", lat: 37.432, lng: -122.094 }
];
const markers = locations.map((location) => new AdvancedMarkerElement({
map,
position: { lat: location.lat, lng: location.lng },
title: location.title
}));
}
initMap();
</script>Replace DEMO_MAP_ID with your project’s map ID before deploying. The example uses ordinary JavaScript for the data loop; Google’s marker API is the same if you choose to iterate using jQuery instead. The API’s add-marker guide shows the required library import and marker properties: Add a marker to the map.
Recommended Free Tools
#1 Best Overall
Use jQuery only for the parts it handles
If your page already uses jQuery, it can iterate the location array. Keep the Maps API calls explicit and run the loop only after the marker library and map are ready:
$.each(locations, function (_index, location) {
const marker = new google.maps.marker.AdvancedMarkerElement({
map: map,
position: { lat: location.lat, lng: location.lng },
title: location.title
});
markers.push(marker);
});This snippet belongs inside code that runs after google.maps.importLibrary("marker") has resolved and after map has been created. jQuery’s $.each() visits your data; it does not create Google Maps markers. Retain the marker references if the application will later change or remove them.
Rank #2
Choose between JavaScript-created markers and map markup
Google documents two ways to use advanced markers. They are alternative implementation styles, not steps to combine in one marker.
| Approach | Best suited to | What it looks like |
|---|---|---|
Programmatic AdvancedMarkerElement |
Applications that create markers from data, update them through code, or need to retain references for later changes. | Create a marker with a position and associate it with the map using its map property. |
<gmp-advanced-marker> inside <gmp-map> |
Pages already structured around Google’s map web components and marker elements. | Put marker elements inside the map element and provide their locations through markup and supported attributes. |
Google’s advanced-marker guide covers both the programmatic and web-component styles: Add a marker to the map. If you use a UI framework, check its guidance for managing custom elements and DOM lifecycle rather than assuming a component integration works automatically.
Free tools Windows power users keep installed
One-click scans. No signup required.
Update or remove markers
For programmatically created advanced markers, keep references when you expect to change the map later. To remove a marker, set its map property to null; Google also documents setting its position to null. For example:
markers[0].map = null;If you need to display it again, associate it with the map again. See Google’s marker creation and removal guidance.
Rank #4
Why older examples use google.maps.Marker
Many older tutorials use google.maps.Marker. Google deprecated that class on February 21, 2024, with Maps JavaScript API v3.56, and recommends AdvancedMarkerElement for new implementations. Google says the legacy class is not currently scheduled for discontinuation, so deprecation does not mean existing code stops working immediately. See Google’s migration guide and Marker API reference.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
