Add an Advanced map

The Advanced map component renders a Google map and accepts Map marker, Route, and Dynamic Route / Pointers children. Configure the site key before building the map.

Configure Google Maps

You need a Google Cloud project, the required Maps APIs, and a browser key.

1. In Google Cloud Console, enable Maps JavaScript API.
2. Enable Places API when address search, autocomplete, or proximity features need it.
3. Create a browser API key.
4. Restrict the key to the production and approved staging HTTP referrers.
5. Restrict it to only the required Maps APIs.
6. In WordPress, open Settings → POM Theme → Integrations → Google Maps.
7. Paste the key into Google Maps and save.

Do not use an unrestricted production key. Google controls its own billing, quota, and service availability.

Add the map

1. Edit a page with Page Builder.
2. Add Advanced map inside a column.
3. Enter Map height with a number and unit, such as 300px or 50vh.
4. Choose Default map center:
   • Calculate uses the average marker coordinates;
   • Custom reveals default latitude and longitude.
5. Choose Zoom level on page load or Based on markers (fit them all).
6. Configure the optional zoom, map type, street-view, and full-screen controls.
7. Save the component.

Add a marker

Inside Advanced map, add Map marker and complete:

• Title;
• Latitude and Longitude;
• optional Address search;
• optional Marker image;
• optional Info box content, shown when the visitor selects the marker.

Valid coordinates are the reliable source for placement; address search helps populate a location but does not replace verification.

Add a route

Use Route to define an ordered set of markers and choose Driving, Walking, Bicycling, or Transit. Use Dynamic Route / Pointers only when the locations come from the current post, another configured post, or a saved query.

Style and verify

The Map styles group accepts a custom style name and a valid JSON map style. After saving:

1. update the page;
2. open the public URL while signed out;
3. check markers, info boxes, route, zoom, and controls;
4. repeat on a narrow viewport;
5. confirm the browser key accepts the production hostname.

POM requests the shared Google Maps API asynchronously only when a compatible frontend feature needs it and a key is configured.

For map or proximity facets, continue with Maps and proximity search.