Embedding Google Maps

The quickest route needs no account: open the place on Google Maps 1 , choose Share, switch to the Embed a map tab, pick a size and click Copy HTML. You get an <iframe> whose src carries an encoded pb= parameter. For maps you build in code, the Maps Embed API takes a readable query string instead. It is free with unlimited requests, but every request needs an API key:

A lazy-loaded map from the Maps Embed APIHTMLLive

<iframe width="600" height="340" style="border:0" loading="lazy" allowfullscreen
  title="Map of the Eiffel Tower"
  referrerpolicy="strict-origin-when-cross-origin"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Eiffel+Tower,Paris">
</iframe>

Other modes are view, directions, streetview and search. The key is visible in your HTML, so in the Google Cloud 1 console restrict it to your site (https://*.example.com) and to the Maps Embed API alone. loading="lazy" (supported in all major browsers) defers the heavy frame until the reader scrolls near it. Custom markers and drawing need the Maps JavaScript API, which requires billing on the project; the keyless open-source alternative is Leaflet 19,080 (https://github.com/Leaflet/Leaflet 45,672 ) with OpenStreetMap 579 tiles.

MENU