How to embed Google Maps Image on a Website

Google maps is a very unique and useful service from Google, which enables users to navigate the globe on his/her fingertips without any hassle. One can easily embed Google maps into his/her website or blog through its easy to use API’s(Application Programming Interface). Any non-technical individual can also embed Google maps into his/her websites without prior knowledge of programming languages. However, Google maps changes its Maps API’s very frequently, so we need to check for new updates at regular intervals.

In this article we are going to understand about the Google Static Maps API which can be easily embedded in our web applications without requiring any dynamic page loading or JavaScript stuff. All we need to do is that, we need to create an URL to embed in our web applications by using <img> html tag and should be placed in any required block of web application.

Embed Google Maps Image

Steps to create a key for Google Static Maps API

We uses Google Static Maps API with <img>(html tag). Upon any subsequent HTTP request via URL, Google Static Maps API returns an image(jpeg,png or gif). We need to specify location of the map, zoom level, type of map and other various feature on the map for each request.

This API uses an API key to identify web application and is fully managed through Google API’s console. So to create a key we need to follow below mentioned steps before integrating static maps API’s into web application.

a) First login to your “Gmail Account” and open other tab/window to navigate to https://code.google.com/apis/console/?noredirect

b) After visiting “Google API’s Console“, click on “Services” on your left side and activate “Static Maps API” service.

c) In this final step you need to copy “API Key” from “Simple API Access” in “API Access” option. Google Static Maps API applications use “Key for browser apps“.

Sample API Key

BIzbSyBNJE-PLAD7nYNJWW45kXdCHdSgkQ_Pq-I

Steps to embed Google Static Maps API into website/blog

Before embedding Static Maps API’s into any desired web application, we should verify our API key for any error or duplicacy. We need to use a valid URL parameter to fetch valid map image upon HTTP request.

Valid URL

http://maps.googleapis.com/maps/api/staticmap?parameters

Sample URL to be Embedded in Website or Blog

http://maps.googleapis.com/maps/api/staticmap?center=New+Delhi&zoom=13&size=600×300&key=API_KEY

Note: Always use HTTPS(recommended) if your request includes any sensitive information about user. Static Maps API doesn’t support “Custom Icon” URLs that use HTTPS.

Example:
Google maps image

Sample Google Maps Image via Static Maps API

Location, Map & Feature parameters

Above mentioned example contains few important parameters which enables developers or individuals to embed a valid URL into <img>(html tag). So in this section we are going to understand the various parameters of Static Maps API.

Location Parameters

zoom (required): It defines the zoom level of the map. The lowest zoom level is “0” and highest is 21+.

center (required): It defines center of the map. This parameter takes location as either latitude,longitude pair(eg: 50.654852,42.547124) or as a string type(eg: new delhi, model town), which identify any unique location of the globe.

Map Parameters

maptype (optional): We can use various maptype values with this parameter such as: roadmap, satellite, terrain, hybrid.

size (required): It defines the dimensions of the map. For eg: 600×400 (horizontal x vertical).

format (optional): This parameter confirms the format of returned image. For eg: jpeg, png, gif.

region (optional): It displays borders based on the geo-political sensitivities.

language (optional): It defines the language used for display of labels on map tiles.

scale (optional): This parameter relates to the number of pixels.

Feature Parameters

path (optional): This parameter uses Pipe Character( | ) to separate string of point definitions. It defines a single path of two or more connected point to overlay on the image at specified locations.

visible (optional): It specifies one or more locations which should remain visible on the map, though no markers or other indicators will be displayed.

style (optional): It defines custom style to alter the presentation of a specific feature of the map.

markers (optional): It takes a single marker definition with parameters separated by the pipe character( | ).

API Usage Limitations

However these API’s are free to use for commercial usage but exceeding any per-described usage limits will cost you some extra money. For example: According to Google if your website or application generates 25000 Static Maps image requests or more each day, for at least 90 consecutive days then Google will charge for this usage.

Note: Static Maps URLs have restrictions of 2048 characters in size. You can generate longer URLs by appending more markers or paths. But it is advised to stay in restricted characters limits for URLs.

Knowledge Source:  Google Maps

Uploaded by:  Author