Google Maps in AMP
The Google Map is the cornerstone of many Contact or Find us pages on the web. In the following sections, we'll see how to add a Google Map to an AMP page with amp-iframe. After that, we'll see how to:
- Add a search function to a map
- Use the Geolocation API to determine the location of the user's device and center the map on this location
- How to draw a route on the map between the device location and another location
We'll start off with the Google Maps Embed API, which just requires you to configure a URL to request a map to display in the iframe. We can achieve quite a lot with the Embed API, but we'll get to a point where we'll need to use the more powerful Google Maps JavaScript API, which allows us to build and configure maps through JavaScript programming.
Note
Note that you're not limited to using Google Maps in AMP. You could equally use any map tile provider, such as OpenStreetMap, along with any JavaScript API you like, such as the wonderful leaflet.js.
