Creating basic google map

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize()
{
var map_properties = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom: 5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),map_properties);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="googleMap" style="width:500px;height:380px;"></div>

* initialize() method sets map properties.
* map_properties is an object which defines parameter

*The center property specifies where to center the map. Create a LatLng object to center the map on a specific point. Pass the coordinates in the order: latitude, longitude.

*The zoom property specifies the zoom level for the map. zoom: 0 shows a map of the Earth fully zoomed out. Higher zoom levels zoom in at a higher resolution.

The mapTypeId property specifies the map type to display. The following map types are supported:

1)ROADMAP (normal, default 2D map)
2)SATELLITE (photographic map)
3)HYBRID (photographic map + roads and city names)
4)TERRAIN (map with mountains, rivers, etc.)

Create a Map Object

var map=new google.maps.Map(document.getElementById("googleMap"),map_properties);
The code above creates a new map inside the <div> element with id="googleMap", using the parameters that are passed (mapProp).

Add an Event Listener to Load the Map

google.maps.event.addDomListener(window, 'load', initialize);
Add a DOM listener that will execute the initialize() function on window load (when the page is loaded):

Share This:

Leave a Reply

Your email address will not be published. Required fields are marked *