Follow these steps to get set up with the Advanced Markers Preview.
Get an API key and enable the Maps JavaScript API
Before using the Advanced Markers preview, 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.
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.
Update your map initialization code
This requires the map ID you just created. It can be found on your Maps Management page.
Use
v=beta
andlibraries=marker
in your APIscript
tag. For example:<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=marker&callback=initMap"></script>
Provide a map ID when you instantiate the map using the
mapId
property. This can be a map ID that you provide, orDEMO_MAP_ID
.const map = 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,
or an invalid map ID is passed, Advanced Markers cannot load. As a
troubleshooting step, you can add a mapcapabilities_changed
listener to
subscribe to map capability changes. This will indicate whether the following
conditions have been met:
- A valid map ID is in use.
- The map ID is associated with a vector map, if features requiring a vector map are in use.
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', () => { const mapCapabilities = map.getMapCapabilities(); if (!mapCapabilities.isAdvancedMarkersAvailable) { // Advanced markers are *not* available, add a fallback. } });