Making the google maps is not so difficult. Just to follow some code and google apis.We can make any location google map by using the code below. We have taken the example of dehradun location in India for making this google map.
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(30.321915,78.026619),
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:500px;"></div>
</body>
</html>
First before writing the code for google map, We have to call Google Maps API . This Api is a JavaScript library.It should be added to the page where we call google maps.
<script src="http://maps.googleapis.com/maps/api/js"></script>
After calling map api we can set the properties by creating a function to initialize the map and we should create an object named (mapProp) to define the properties for the map.
function initialize() {
}
var mapProp = {
center:new google.maps.LatLng(30.321915,78.026619), // center property specifies where to //center the map.We can add latitude and longitude here for a particular location
zoom: 7, // zoom property specifies the zoom level.
mapTypeId: google.maps.MapTypeId.ROADMAP // mapTypeId property specifies the map type to display
};
after defining the properties , we have defined the size of the map.
<div id="googleMap" style="width:500px;height:500px;"></div>
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); //It creates a new map inside the <div> element
After defining the size in div we have to add Event Listner to load the map in the div.
google.maps.event.addDomListener(window, 'load', initialize);//this will execute the initialize() function
0 Comment(s)