How to embed a google map in a HTML page ?

Example of how to embed a google map in a HTML page

Table of contents

Create an html file
Create a google map API key
Enable google map API

Create an html file

First step, let's create a simple html file:

<!doctype html>
<html>
<head>
<title>Embedding a google map</title>
</head>
<body>

</body>
</html>

Now add between bodytags :

 <iframe
    width="450"
    height="450"
    frameborder="0" style="border:0"
    referrerpolicy="no-referrer-when-downgrade"
    src="https://www.google.com/maps/embed/v1/view?key=my_api_key&center=48.8584,2.2945&zoom=17&maptype=satellite"
allowfullscreen>
  </iframe>

How to embed a google map in a HTML page ?

Replace my_api_key by your api key (see Create a google map API key below)

To get more info about parameters available see this tutorial

Note: also check the google map: pricing. For embedded map API it is unlimited.

Create a google map API key

To embed a google map it is necessary to create an API key:

Note: do not forget to edit application restrictions.

Enable google map API

If the html page display the following error message:

Google Maps Platform rejected your request. This API project is not authorized to use this API.

It is probably because you din't enable the google "Maps Embed API":

Search Maps Embed API click on it and click on the button Enable.

Developer in my spare time, I’m interested in Earth observation and satellite-based fire detection. Passionate about Python, machine learning, and open science.

How to embed a google map in a HTML page ?

Create an html file

Create a google map API key

Enable google map API

Benjamin

Skills