Select platform: [Android](https://developers.google.com/maps/documentation/android-sdk/advanced-markers/start.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/ios-sdk/advanced-markers/overview.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/advanced-markers/start.md.txt "View this page for the JavaScript platform docs.")

<br />

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](https://developers.google.com/maps/documentation/javascript/cloud-setup).

[Get an API key](https://developers.google.com/maps/documentation/javascript/get-api-key.md.txt)

## Create a map ID

To create a new [map ID](https://developers.google.com/maps/documentation/get-map-id), follow the steps in
[Cloud customization](https://developers.google.com/maps/documentation/javascript/maps-customization-overview).
Set the Map type to **JavaScript** , and select either the **Vector** or
**Raster** option.

> [!IMPORTANT]
> **Important:** For testing, you can skip the step of creating and configuring a map ID, by using `mapId: 'DEMO_MAP_ID'` in your app code.

![Create Vector map ID](https://developers.google.com/static/maps/documentation/maps-customization/images/vector-map-id.png)

## Update your map initialization code

This requires the map ID you just created. It can be found on your [Maps
Management](https://console.cloud.google.com/google/maps-apis/studio/maps) page.

1. [Load the Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/load-maps-js-api.md.txt).

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

   ```javascript
   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
   ```
3. 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`.

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

> [!CAUTION]
> **Caution:** The example maps for advanced markers use map IDs that are linked to a reduced-POI map style. If you re-use example code, we recommend replacing these map IDs with `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.

```javascript
// 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

[Add a marker to a map](https://developers.google.com/maps/documentation/javascript/advanced-markers/add-marker.md.txt)