Few days back during I worked for a Corporate website designing I found to integrate Google Map in their contact us page. Their office location is in Chicago, US. According to latitude & longitude this location (Latitude & Longitude) is coming under 40.446947, -90.878906. According to the Customer here they required to add Google Map to Website using simple JavaScript. I did so & sharing the same example here.
Technically it is very simple to embed Google Map API in HTML5. To do so here I have a container div “mapView” in HTML body. To refer Google Map API here I integrated the script file from http://maps.googleapis.com/maps/api/js. Using a simple JavaScript function initGoogleMap() I am configuring the Google Map properties. Basically in the below example I used 3 properties to configure the Google Map. Center, Zoom & mapTypeId. Center is accepting latitude & longitude to show that point in the center of the map view. Using zoom I am passing 6 to show the map more closer to the user. mapTypeId is useful to display the map in various views. Basically there are 4 types of views provided by Google Map. These are ROADMAP (the default 2D view), SATELLITE (photographic view), HYBRID (photographic view + roadmap), TERRAIN (map with mountains, rivers, temples etc.).
Finally to initialize the Google Map API I am assigning the new instance of the Google Map API to a variable “newMap”. On window load to display the map in Contact us page I am adding the function initGoogleMap() to an event of Google Map using DOM listener method.
embedGoogleMap.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>How to add Google Map to Website?</title>
<!--Google Map API-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
/*Funtion to assign properties for map view*/
function initGoogleMap() {
var mapProperties = {
center: new google.maps.LatLng(40.446947, -90.878906),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
/*Creating a new instance for Google Map*/
var newMap = new google.maps.Map(document.getElementById("mapView"), mapProperties);
}
/*On window load showing Google Map*/
google.maps.event.addDomListener(window, 'load', initGoogleMap);
</script>
</head>
<body>
<div id="mapView" style="width:600px; height:420px;"></div>
</body>
</html>
