Step 9: Publish and test

Test on the published site, not only the canvas. Work through this list.

1. The map loads with no error message and no dark watermark.

2. Click each type of marker. The popup opens above it and fits on screen.

3. Search for a location name. Only matching markers stay.

4. With Group markers, choose each pill and check the map re-frames.

5. Resize the browser narrow, or open it on a phone. The sidebar becomes a bottom sheet.

6. Click each popup button and check the links.

7. Open the browser console (F12). There should be no red Google Maps errors.

Before you share

• Make sure the API key has the website restrictions from the API key guide.

• Check that billing alerts are set.

• If you use more than one map on a page, all must use the same API key.

If something is wrong, see Troubleshooting.