I have added a Google Map to my website using this approach, it works perfectly for my needs BUT.. I would really like to add a poly line. Can anyone please show me how to add such a line to the following sample.
HTML Code:<!--From http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/--> <!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> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <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"> var infowindow = null; $(document).ready(function () { initialize(); }); function initialize() { var centerMap = new google.maps.LatLng(39.828175, -98.5795); var myOptions = { zoom: 6, 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 () { // alert(this.html); infowindow.setContent(this.html); infowindow.open(map, this); }); } } </script> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>


Reply With Quote

Bookmarks