How to integrate Google maps in your website?

We come across a lot of websites nowadays that show images of maps and exact locations of the particular place shown in an interactive web component. This is because Google has provided an API (Application Programming Interface) called Google maps which can be integrated in your website. If you abide by the terms and conditions of Google, you are free to embed the Google Maps API in your web application with JavaScript. This API provides a number of utilities for manipulating maps like those on the original Google Maps.The recent breakthrough in web development is ‘AJAX model ‘, it is shorthand for JavaScript + XML. Google maps is one such application where AJAX model technology is used. The highlight of Google maps is that after its integration you can know the exact details (in terms of latitudes and longitudes) of the desired destination, zoom in, zoom out and drag it. You can access a huge database created by Google to get the exact desired location and the interactive interfaces as well.Getting Started :Integrating a Google map in your website is not a tough task at all. Google made it as simple as possible for all the web users to integrate this great feature. All you need to do is follow these steps:

1) Getting the API key by signing upYou just need to accept the terms and conditions by Google, provide the URL of your website and confirm the registration to generate API key. You can apply for the key here: http://www.google.com/apis/maps/signup.html

2) Code for adding the Google map in the websiteNow that you have generated the API key, just add this code to your page. Copy the code snippet in your HTML page to get the Google map. Replace the “API_KEY_GENERATED” by the key received.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=API_KEY_GENERATED"

 type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">//<![CDATA[var map = new
GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(19.997453,73.789802 ), 3);//]]></script>
</body>
</html>

Getting the co-ordinates of latitude and longitude

The above code will generate the Google map for the location of ESDS Software Solution, India. The latitude and longitude of the desired location can be easily figured out from the web. Some websites provide you with the coordinates of a particular location on the basis of the name or address of that location.

An example of such a website is  http://itouchmap.com/latlong.html

You can get the desired location in Google maps by just changing the coordinates.

Controlling  DragFeature :

Drag is a default feature in Google maps that is if you move the mouse cursor over the map and press the button and drag it, the map becomes moveable. If you want to disable this feature just add the following code:

map.disableDragging();

Scaling and repositioning toolbar is not available in Google maps API.  To add this toolbar you can use the following code:

map.addControl(new GLargeMapControl());

Some of the controls available are:

GMapTypeControl:
It is used for switching between satellite view and map view.

GSmallMapControl:
This is a smaller version of GlargeMapControl, By using this control you can eliminate the zooming scale bar but the zoom control remains the same.

GSmallZoomControl:
This control includes only the zooming buttons, excluding everything else found in the GLargeMapControl.

Adding a Marker to your Map :

Google maps is a powerful tool but we can add more functionality and take the tool to next level by adding markers to the specific point in the map. It is simple too. Just find the coordinates (longitude and latitude) of the location you’d like to mark, instantiate a new GPoint() object with these coordinates, create a GMarker object based on this point, and finally add that marker to the map.

var point = new GPoint(19.997453,73.789802); var marker = new GMarker(point); map.addOverlay(marker);

Adding a location description to your marker:

Sometimes, just adding the marker is not enough. We have to be more precise with respect to the description of the location. Thus, we can add the description window to our marker. The following is the code snippet for adding a description to your marker.

function createInfoMarker(point, address) { var marker = new GMarker(point); GEvent.addListener(marker, “click”,function() { marker.openInfoWindowHtml(address); } ); return marker; } var point = new GPoint(19.997453,73.789802); address = “ESDS software Solutions Plot no. B-24 and 25 NICE Industrial Area, Nasik 422007″; var marker = createInfoMarker(point, address); map.addOverlay(marker);

This was just an introduction to the powerful service of Google maps. For more details, we can always check out the API documentation for Google maps on Google website.

This entry was posted in API, HTML, Programming and tagged , , , . Bookmark the permalink.

Leave a Reply