Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Get started

Spark icon

Page Summary

Get started with advanced markers by obtaining an API key, enabling the Maps JavaScript API, and creating a map ID.
Update your map initialization code to include loading the advanced markers library and providing a map ID when instantiating the map.
For testing purposes, use DEMO_MAP_ID as the map ID or utilize the provided example code, but replace the example map IDs for production.
Optionally, check map capabilities to ensure advanced markers are available or to implement a fallback if they are not supported.

Select platform: Android iOS JavaScript

Follow these steps to get set up with advanced markers.

Get an API key and enable the Maps JavaScript API

Before using advanced markers, you need a Cloud project with a billing account, and the Maps JavaScript API enabled. To learn more, see Set up your Google Cloud project.

Get an API key

Create a map ID

To create a new map ID, follow the steps in Cloud customization. Set the Map type to JavaScript, and select either the Vector or Raster option.

Create Vector map ID

Update your map initialization code

This requires the map ID you just created. It can be found on your Maps Management page.

Load the Maps JavaScript API.

Load the advanced markers library from within an async function when needed:

const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary("marker")asgoogle.maps.MarkerLibrary;

Provide a map ID when you instantiate the map using the mapId property. This can be a map ID that you provide, or DEMO_MAP_ID.

constmap=new
google.maps.Map(document.getElementById('map'),{
center:{lat:-34.397,lng:150.644},
zoom:8,
mapId:'YOUR_MAP_ID'
});

Check map capabilities (optional)

Advanced markers requires a map ID. If the map ID is missing, advanced markers cannot load. As a troubleshooting step, you can add a mapcapabilities_changed listener to subscribe to map capability changes. Using Map Capabilities is optional, and recommended only for testing and troubleshooting purposes, or for runtime fallback purposes.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed',()=>{
constmapCapabilities=map.getMapCapabilities();
if(!mapCapabilities.isAdvancedMarkersAvailable){
// Advanced markers are *not* available, add a fallback.
}
});

Next steps

Add a marker to a map