<!-- Example 2a: Google Map with Marker (no jQuery)
-->
<!-- http://opengeocode.org/tutorials/googlemap/googlemaps_2.php
-->
<!DOCTYPE html>
<html>
<head>
<title>Google Map Template with Marker</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
// 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);
// Place a standard Google Marker at the same location as the map center (Washington, DC)
// When you hover over the marker, it will display the title
var marker = new google.maps.Marker( {
position: latlngDC,
map: map,
title: 'Washington, DC'
});
}
// 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>