Google Maps API for newbies

Friends, in this post, I will show you how to implement Google Maps using its API (Application Program Interface) on your own webpage. This is a quick guide to get you started right away. So lets begin!

Google has recently launched version 3 of their Maps API. As of now for using version 2 of Google Maps API you need to register at their website and get a API key for your own website. But for version 3 you don’t need to do so!

To embed Google Maps in our webpage we first need to include http://maps.google.com/maps/api/js javascript along with a parameter known as sensor which has to be either set to true or false. In this case it has been set to false. Look at the code given below -

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">


</script>

<script type="text/javascript">

function initialize_the_map()

{

var latlng = new google.maps.LatLng(28.6000003815, 77.1999969482);


var myOptions = {

zoom: 7,

center: latlng,


mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map"), myOptions);


}

</script>

<title> Google Maps API Version 3 | bOtskOOl Geeks </title>

</head>

<body onload="initialize_the_map()">

<div id="map" style="width:100%; height:100%">


</div>

</body>

</html>

In the function initialize_the_maps() just change the value of latitude and longitude accordingly; in this case it is (28.6000003815, 77.1999969482) which are the coordinates of the New Delhi city. Also you can change the zoom parameter. Here it has been set to 7. Just try changing it to 6 or 8 and you will see the difference.

Now you are all set to go ahead! Just copy and paste the above code in your favourite HTML editor and save it as an HTML file. Enjoy!

It should look like the map shown below. // &lt;![CDATA[ function initialize() { var latlng = new google.maps.LatLng(28.6000003815,77.1999969482); var myOptions = { zoom: 7, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), myOptions); } google.setOnLoadCallback(initialize); // ]]&gt;