How do I add Google Map to website using Google Maps API?

Google has revolutionized the web by providing great services and also apis (application programming interfaces) that let people to take advantage of those services and help to build their own apps.

Google Map API lets anyone add map in their website.

https://developers.google.com/maps/documentation/

There are different versions of Google Maps API that you can use for different purposes that you can use for different purposes. There is Maps JavaScript API, Maps API for flash as well as Google Earth, Maps Image API.

Maps Image API lets you put in a simple image with a map on any website. There are lot of things that you can do with API. First thing you have to do is choose for you want to work with street view or the regular API. We will be looking into static maps API. Click on Developer’s documentation (refer screen below).

https://developers.google.com/maps/documentation/imageapis/

Static Maps API V2 Developer Guide:

You will notice all the different types that you can build and different options that you can put on your map.

Let’s look at the example with some of the options:

Example 1:

Code-snippet

{code type=”html”}<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Google Map</title>
</head>
<body>
<img src=”http://maps.google.com/maps/api/staticmap?center=4171+Market+St+Ventura+CA&amp;zoom=15&amp;size=500×400&amp;format=png32&amp;maptype=roadmap&amp;sensor=false” alt=”Map to our facilities” />
</body>
</html>
{/code}

We are passing few options to maps.google.com.

Center:
First one is center or where we want a map to be centered at. For that we put in address there. We separate the address with + symbol for the places.

Zoom:
You can specify a Zoom Ratio. You can change zoom value from 15 to make map zoom in and out.

Size:
You can enter specific size for map. You can type some different parameters (replacing 500×400) to make map bigger or smaller. There are some limits on how big you can make this map. there is also a limit on amount of requests that you can make for Maps from Google API. After certain amount of requests in fixed period, you may require to open up an account and this is going to cost you little bit of money.

Format:
Default image format is png. But you can also choose to have map image in different formats like gif and jpg

Maptype:
You can ask for different versions of the map. In above example we have chose standard roadmap. You can also replace this by satellite, and you will see satellite version of Map. You can also specify ‘Hybrid’ which is combination of ‘roadmap’ and ‘satellite’. Lastly, you can use terrain for another version of map.

Sensor:
Finally, we have to set sensor as false, which will tell Google that we are not using the device which has built-in GPS systems.

This map does not exactly tell us where in the map, address is located. It would be really nice to have marker for this.

Example 2: Map with marker to locate address.

Code-snippet

{code type=”html”}<!DOCTYPE HTML>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Google Map</title>
</head>
<body>
<img src=”http://maps.google.com/maps/api/staticmap?center=4171+Market+St+Ventura+CA&amp;zoom=15&amp;size=500×400&amp;format=png32&amp;maptype=roadmap&amp;markers=4171+Market+St+Ventura+CA&amp;sensor=false” alt=”Map to our facilities” />
</body>
</html>
{/code}

Map

We have added here is marker section that has address where marker will be displayed.

Example 3: Click-able Map

If we want to make map click-able so that one can go to Google and checkout dynamic version of the map, then we would have to add an anchor tag.

Code-snippet

{code type=”html”}<!DOCTYPE HTML>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Google Map</title>
</head>
<body>
<a href=”http://maps.google.com/maps?q=4171+Market+St+Ventura+CA”>
<img src=”http://maps.google.com/maps/api/staticmap?center=4171+Market+St+Ventura+CA&amp;zoom=15&amp;size=500×400&amp;format=png32&amp;maptype=roadmap&amp;markers=4171+Market+St+Ventura+CA&amp;sensor=false” alt=”Map to our facilities” />
</a>
</body>
</html>
{/code}

Link of map is little different. Anchor tag taks you to http://maps.google.com/maps and passes long variable q with the address.

Example 4: Street-view map

If you need a photo of your building on your website, then Google provides slightly different version of Google Maps API.

Code-snippet

{code type=”html”}<!DOCTYPE HTML>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Google Map</title>
</head>
<body>
<img src=”http://maps.googleapis.com/maps/api/streetview?size=600×300&location=4171+Market+St+Ventura+CA&heading=70&fov=120&pitch=5&sensor=false” />
</body>
</html>
{/code}

Map

PHP developers team at Outsourcing Partners are skilled to develop advanced applications using Google Map APIs

This entry was posted in Web Application Development and tagged . Bookmark the permalink.

Comments are closed.