A Beginner's Guide to the Google Maps API/

...

/

Embed Maps on Web Pages

Embed Maps on Web Pages

Learn how to place a map on a web page using an HTTP request.

We'll cover the following...

Embed a map

The Maps Embed API embeds a map in a web page without JavaScript. Different map modes can be integrated based on specific use cases. This lessons covers everything needed to start embedding maps into applications.

Thanks to the Maps Embed API, ann interactive map can be placed on a web page using an HTTP request. Therefore, the Maps Embed API URL can simply be set as the src attribute of any iframe.

Create a URL

To load the map using the Maps Embed API without JavaScript, a URL needs to be specified. An example URL is as follows:

https://www.google.com/maps/embed/v1/MAP_MODE?PARAMETERS&key=API_KEY

The following changes need to take place inside this URL:

  • Replace MAP_MODE with the map mode to be displayed.
  • Replace PARAMETERS with the required and optional parameters for the chosen map mode.
  • Replace API_KEY with the API key generated while setting up the credentials.

Map modes

One of the following map modes can be chosen and used in the request URL for the Maps Embed API:

  • The place mode focuses on and displays a specific place on the map.
  • The view mode displays a section of the map without focusing on any place in particular.
  • The directions mode displays the different routes between two points on the map.
  • The streetview mode displays interactive panoramic imagery of a certain place on the map.
  • The search mode displays results on the map based on a search query.

Add a URL in an iframe

Using the Maps Embed API on a web page, the URL needs to be set as the value of the src attribute of an iframe. Use the height and width attributes of the iframe to set the size of a map. In the sample URL below, the width is set to 450 px and the height to 250 px.

<iframe
	width="450"
	height="250"
	frameborder="0" style="border:0"
	src="https://www.google.com/maps/embed/v1/MAP_MODE?key=API_KEY&PARAMETERS" 
	allowfullscreen>
</iframe>

Code example

The example below is an HTML file created with an iframe that loads the map.

Console
Embedding a map
In the example above, the entire iframe for the map is defined in lines 12–20. Here’s a more detailed explanation of the code:


    

  • Line 13: We set the width of the iframe to 900.
    • 

  • Line 14: We set the height of the iframe to 450.
    • 

  • Line 15: To remove the default iframe border from around the map, we use the frameborder="0" and  style="border:0" properties.
    • 

  • Line 17: We use the allowfullscreen property to activate the fullscreen mode.
    • 

  • Lines 18–19: We set the URL value to the src attribute of an iframe to embed our map on the webpage. Moreover, we use the place map mode to display the city of Rome.
    •