Friday, 28 June 2013

Integrate Google Maps in your Webpage.

hi all,

In this article, i will show you, how we can integrate 
Google maps into our web pages,

here, basically integrating Google maps is like a front end part, i.e., on the UI page, it can be done by using simple Java script.

Firstly, in order to integrate Google Maps into your web page,
you have to get a Google map API key(required for earlier API'S before Version 3),

But, for Google map API Version above 3, you no need to get an API Key,

you can integrate a Google map, into our web page just by adding below scripts into your head section of the web page,

<script type="text/JavaScript" src=""></script>

For getting basic idea of how to integrate, get API key, what type of map to integrate(i.e.,ROAD MAP, etc.,) just click here

after checking the above link, you will get an idea of how to integrate a Google map into our web pages,

After adding the above script, add the below code as well to integrate a simple map,

<script type="text/javascript">

//The map object
var map;
//Longitude of the center point
var longt = 80.683594;
//Latitude of the center point
var lat = 19.890723;

//initialize the google map
function initialize()
//Options for the map object
var myOptions =
zoom: 5,
draggable: true,
center: new google.maps.LatLng(lat, longt),
mapTypeId: google.maps.MapTypeId.ROADMAP

//create the map object
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);

//show the map in the web page
google.maps.event.addDomListener(window, 'load', initialize);


and with the above code as well, in the body section, add the below code,

<div id="map_canvas" style="width: 100%; height: 800px;"></div>

Now you can a see your Google map Integrated in your web page.

the above map, just gives a glimpse of India,

You can change your lat-long positions, zoom levels, the type of map you need, etc.,

so, this is the way how, you can integrate a simple Google map into your web page.

Not only Integration, with Google maps we can do lot of things,
add markers, create locations on the map, etc.,

Any comments, updates will be thankful to update myself and the blog..

Shaik Shameer ali

No comments:

Post a Comment