First create your html page.
<!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>Google Maps Example</title> <script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script> </head> <body> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="map.js"></script> <div id="map_canvas" style="width: 600px; height: 600px;"></div> </body> </html>
Now add the following javaScript.
map.js
var infowindow = null; $(document).ready(function () { initialize(); }); function initialize() { var centerMap = new google.maps.LatLng(39.828175, -98.5795); var myOptions = { zoom: 4, center: centerMap, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); setMarkers(map, sites); infowindow = new google.maps.InfoWindow({ content: "loading..." }); //var bikeLayer = new google.maps.BicyclingLayer(); //bikeLayer.setMap(map); } var sites = [ ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'], ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'], ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'], ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.'] ]; function setMarkers(map, markers) { for (var i = 0; i < markers.length; i++) { var sites = markers[i]; var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); var marker = new google.maps.Marker({ position: siteLatLng, map: map, title: sites[0], zIndex: sites[3], html: sites[4] }); var contentString = "Some content"; google.maps.event.addListener(marker, "click", function () { infowindow.setContent(this.html); infowindow.open(map, this); }); } }
This is the output.