Creating a Basic Google Map
Here we going to discuss about creating Google maps with API. API means 'Application Program Interface'. Before proceeding to the tutorial for the maps to work an API key is needed which can be received free of cost from Google.
In this section I will explain you how to create a basic Google Map. Its easy, just try it out...,
See demo
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(9.9667,76.2167),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Code Explanation
<script src="http://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&sensor=false"> </script>
This tag is required to include Google Maps API. key=<YOUR_API_KEY> , enter you API key provided.
The "sensor" attribute can be true or false.
var mapProp = {
center:new google.maps.LatLng(9.9667,76.2167),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
"center" property decides were to center the map depending upon the latitude and longitude given.
"zoom" decides the initial zoom level of the map.
"mapTypeId" property specifies the map type. It can be ROADMAP, HYBRID, TERRAIN and so on..,
Finally on execution the map will be shown on the specified target.
Its all about creating a basic Google Map. If any suggestions or help please use the comments area.
Thank You!
No comments:
Post a Comment