<!-- Example 1b: Basic Google Map using DOM event to initialize/display the map
-->
<!-- http://opengeocode.org/tutorials/googlemap/googlemaps_1.php
-->
<!DOCTYPE html>
<html>
<head>
<title>Basic Google Map Template</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <!-- Google Maps API -->
<script>
var map; // Google map object (global variable)
// Initialize and display a Google map
function Init()
{
// Create a Google coordinate object for where to center the map
var latlngDC = new google.maps.LatLng( 38.8951, -77.0367); // Coordinates of Washington, DC (area centroid)
// Map options for how to display the Google map
var mapOptions = { zoom: 12, center: latlngDC };
// Show the Google map in the div with the attribute id 'map-canvas'.
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
// Call the method 'Init()' to display the google map when the web page is displayed ( load event )
google.maps.event.addDomListener( window, 'load', Init );
</script>
<style>
/* style settings for Google map */
#map-canvas
{
width : 500px; /* map width */
height: 500px; /* map height */
}
</style>
</head>
<body>
<!-- Dislay Google map here -->
<div id='map-canvas' ></div>
</body>
</html>