Adding Google Map To Website Using Embed API

Introduction

We can add Google Maps to our website using different ways. The easiest implementation is to embed a google map using <iframe>. We can embed a map using the below steps:

  • Go to maps.google.com
  • Now select a location and click on the share button.
  • A new window will open. Click the Embed tab on that window and copy the HTML code for that location.
  • Now place the copied code in your HTML file. You are good to go.

Maps Embed API

The embed API for Google Maps shows a google map on our website with a simple implementation. We just have to set the src attribute of the <iframe>. The code is as follows:

  <iframe width="600" height="450" src="https://www.google.com/maps/embed/v1/place?key=API_KEY>  
  </iframe>

We can set the src attribute of the <iframe> tag to be a URL that we can build. We can form this URL as follows:

https://www.google.com/maps/embed/v1/MODE?key=API_KEY&optionalparameters

We will see how this URL is configured:

  • MODE - We have different modes for different functionality usage. place, search, view, directions, and street-view. The place and view mode are free of cost for unlimited usage.
  • API Key - To send an HTTP request to load the map we need an API key which is free of cost.
  • Optional Parameters - There are optional parameters to be used with different map modes which are as follows
    Zoom - Sets the initial zoom level for the map. It can range from 0 to 21 depending upon the data available for different locations.
    Center - Defines the latitude and longitude as the center of the map position.
    maptype- This can be a roadmap or satellite map.
Refer here for checking optional parameters.

Now we will see different modes of Google Maps:

Place Mode

In this mode, we can set the location to be a particular place, town, address, organization, country, etc. We have to use the URL parameter as q which conveys which place should be highlighted on the map. It accepts a location as either a place name, address or place_id. If we have location as Manayata Park. It will be written as Manayata+Park or Manayata%20%Park as the URL is URL-escaped. We can use this mode as follows:

 <iframe width="600" height="450" src="https://www.google.com/maps/embed/v1/place
  ?key=API_KEY &q=Manayata_Park">  
  </iframe>

View Mode

In this mode, we can only see the location without any direction or markers. 

 <iframe width="600" height="450" src="https://www.google.com/maps/embed/v1/view
  ?key=API_KEY
  &center=33.8569,-165.2152
  &maptype=satellite">  
  </iframe>

Directions Mode

It displays a path between two locations. It also states the path and time required from one location to another. We have different URL parameters for this mode which we will see one by one:
  • Origin - The starting point. We can define it as location as either a place name, address or place_id. This is the required parameter.
  • Destination - The last point of the direction. This is the required parameter.
  • Waypoints - This parameter specifies the intermediate locations. We can specify it using the pipe symbol. A maximum of 20 waypoints can ve defined.
  • Mode - Defines the mode of travel such as driving, walking, bicycling, transit, flying, etc.
  • Avoid -This is for the exclusion of tolls, ferries or highways.
  • Units - It is for displaying distance. If we will not specify we will see origin place units used.

 <iframe width="600" height="450" src="https://www.google.com/maps/embed/v1/directions
  ?key=API_KEY
  &origin=Europe
  &destination=India&waypoints=NY
  &avoid=tolls|highways&mode=driving">  
  </iframe>

Comments