Stay organized with collections Save and categorize content based on your preferences.
Follow these steps to get set up with advanced markers.
Get an API key and enable the Maps JavaScript APIBefore 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.
Create a map IDTo 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.
Important: For testing, you can skip the step of creating and configuring a map ID, by usingmapId: 'DEMO_MAP_ID' in your app code.
Update your map initialization code
This requires the map ID you just created. It can be found on your Maps Management page.
Load the advanced markers library from within an async function when needed:
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.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.
const map = new
google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'YOUR_MAP_ID'
});DEMO_MAP_ID, or with your own 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', () => {
const mapCapabilities = map.getMapCapabilities();
if (!mapCapabilities.isAdvancedMarkersAvailable) {
// Advanced markers are *not* available, add a fallback.
}
}); Next steps
Create a default advanced marker
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-07-09 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-09 UTC."],[[["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."]]],["To use advanced markers, you need a Cloud project with a billing account and the Maps JavaScript API enabled. First, obtain an API key and create a map ID, selecting JavaScript as the map type with either Vector or Raster options, or using `DEMO_MAP_ID` for testing. Update your map initialization code by loading the Maps JavaScript API and the advanced markers library. Instantiate the map with the created or demo map ID. Optionally, use a listener to check map capabilities.\n"]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4