Google maps is the web mapping application which provide street views,location views,local business’s views and also work as a travel map. It provides aerial and satellite images of remotest part of the world with high resolution quality. We can easily find time and distance of one place to another by using this application. With its growing popularity on smartphones peoples around the world uses Google maps like other mobile applications. However, we can also embed Google maps api in our web applications without doing any hard coding in web applications.
So keeping this in mind i write this article to introduce Google maps in a more tech friendly way. To embed Google maps in our web application we need to understand how to create a Google maps API key and what are the different modes and their parameters associated with this Embed API.
Introduction of Google Maps API
Google maps API uses simple HTTP request to fetch dynamic map data from the server. We can embed simple API key in URL to embed dynamic map into any web application. With its simple html code of <iframe>, we also can reset the height and width of the map according to our requirements. There is no usage limit for Google Map Embed API. Developers can also embed its API into high traffic websites without fearing any exceeding of usage limit.
After embedding Google maps embed API code into websites or blogs, it presents the same view as traditional Google Maps does.
Sample HTML Code for embedding Google maps(using API key) into websites or blog
<iframe width="900" height="500" frameborder="1" style="border:1" src="https://www.google.com/maps/embed/v1/place?key=API_KEY_COMES_HERE &q=new+delhi+India">
</iframe>
Code Description:
This is a simple html <iframe> code with specific height, width, frameborder, border attributes. We need to define API key in the URL mentioned in ‘src‘ attribute of code to work accordingly. This URL has three main elements which further sync with Google server to fetch dynamic map data such as:
a) Modes: Modes presents the view of Google maps with four main modes such as place, directions, search and view. We have to choose from above mentioned modes in which we want Google maps to render in our web application.
b) API Key: This is our API key, which is used for embedding Google maps into websites or blogs.
c) Parameters: It includes mode specific and optional parameters. We can use these optional parameters in above mentioned URL(in <iframe> code).
How to Obtain your API Key
To obtain free Embed API key, we need to follow below mentioned steps.
Step 1: First log in your Google(Gmail) Account and navigate to https://code.google.com/apis/console/?noredirect
Step 2: On the left hand side click on “Service” menu and Activate “Google Maps Embed API“.
Step 3: Now click on “API Access” menu on your left hand side.
Step 4: After clicking on “API Access” menu you need to copy the API Key below “Key for browser apps (with referers) ” heading and pasting into the HTML code.
Note: Google recommended that an API key must be used in authorized domain that a webmaster administer or owns, to prevent use on unauthorized websites or blogs. By default a key can be used on any website/blog.
Modes & their parameters
You can embed Google maps on your websites or blogs using four available modes such as:
a) Place mode
In this mode any specific location(street address, business location etc) is pinned on the map . To use place mode you need to specify desirable mode into the URL.
https://www.google.com/maps/embed/v1/place?key=API_KEY_COMES_HERE &q=new+delhi+India
Required parameters
‘q‘ refers to the place that is highlighted on the below mentioned map. The string should be URL escaped, so an address such as “New delhi, India” should be converted to “new+delhi+India”. It accepts a location as either a place name or address. This API supports ‘+’ and ‘%20’ when escaping spaces.
Example map for Place Mode
b) Directions mode:
This mode displays the path, distance and travel time between two or more specified locations on the map.
Required parameters:
i) origin: It specifies the starting point(address) on the map. The string should be URL escaped, so an address such as “New delhi, India” should be converted to “new+delhi+India”. It accepts a location as either a place name or address. This API supports + and %20 when escaping spaces.
ii) destination: It defines the ending point(address).
Optional parameters:
i) avoid: It tells the Google maps to skip highways, tolls etc.
ii) units: It specifies either metric or imperial units when displaying distance in the results.
iii) mode: It defines the method(by walking, by driving) of travel.
iv) waypoints: This parameter specifies one or more intermediary places to route directions through between the origin and destination. We can specify multiple waypoints using pipe character ( | ) to separate places.
Example map for Directions Mode
c) Search mode:
Search mode displays results for search in map region.
Required parameter:
‘q’ specifies the search term and we can specifies any geographic location. For example:
“https://www.google.com/maps/embed/v1/place?key=API-KEY-COMES-HERE &q=hotels+in+delhi+India”
In above url ‘q‘ specifies geographic location for the search term.
Example map for Search Mode
d) View mode
This View mode displays map with no markers/directions.
Required parameter:
i) center: It defines the center of the map with latitude and a longitude values(28.700873,77.221236).
Note: You can obtain latitude and a longitude values by searching for specific location on Google maps. When pinned balloon appears on the map then right click on that balloon and select “Whats here” after selecting this option you will find latitude and longitude coordinates for your specified location under the search box.
Optional parameter:
i) region: It defines labels and borders based on geo-political sensitivities. Also accepts a region code specified as a two-character ccTLD (top-level domain) value.
ii) maptype: By default “roadmap” is the maptype for this parameter. We can also define “satellite” as maptype in this parameter.
iii) zoom: It defines the zoom level for the map. This parameter accepts values from 0(for whole world) to 21(individual buildings). The upper limit can vary depending on the map data available at the selected location.
iv) language: This parameter defines language for the UI parameter and display of labels on the map tiles. By default users sees map in their local language.
Example map for View Mode
Note: You can customize height, width and other parameters of the map according to your requirements.
Knowledge Source: Google Maps
Uploaded by: Author