Google Map, combining two methods, markers and polylines

Get Started
1

I am trying to add a Google map to my site. I find dozens of examples but to get two separate methods to work on one page is beyond my cut and paste skills and need help. The example for my markers that I am totally happy with is:

<!--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>

To this I would very much like to add some polylines to define an area, my example:

<!--From https://developers.google.com/maps/documentation/javascript/overlays#Polylines with LatLing , path  and var changed-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Polyline example</title>
   <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }	
	</style>
	
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBIoVMQPWUr5IjMi5f3mexwOhCA17d093A&sensor=false">
    </script>
    <script type="text/javascript">
      window.onload = loadMap;
      function loadMap() {
        var latLong = new google.maps.LatLng(39.828175, -98.5795);
        var mapOptions = {
          zoom: 6,
		  mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL
    },
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: latLong
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var polyline = [
        new google.maps.LatLng(39.58108, -105.63535),
        new google.maps.LatLng(40.315939, -105.440630),
        new google.maps.LatLng(43.785890, -101.90175),
       	new google.maps.LatLng(39.99948, -105.28370),
		
      	
    ];
    var redline = new google.maps.Polyline({
      path: polyline,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

   redline.setMap(map);
  }
</script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

Can anyone tell (show) me how to add this concept to my markers example. Or… :frowning: if these are totally incompatible methods and I am wasting my time trying.

Thank you for your time

2

Hi,

I think something like this will work:


var init = function() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 6,
    center: new google.maps.LatLng(39.828175, -98.5795),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  })
  var infowindow = new google.maps.InfoWindow({
    content: "loading..."
  });
  var bikeLayer = new google.maps.BicyclingLayer();
  var redline = new google.maps.Polyline({
    path: [
      new google.maps.LatLng(39.58108, -105.63535),
      new google.maps.LatLng(40.315939, -105.440630),
      new google.maps.LatLng(43.785890, -101.90175),
      new google.maps.LatLng(39.99948, -105.28370)
    ],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  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.']
  ];
  
  addSites(map, sites)
  bikeLayer.setMap(map);
  redline.setMap(map);
}

function addSites(map, sites) {
  for (var i = 0; i < sites.length; i++) {
    var site = sites[i];
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
    var marker = new google.maps.Marker({
      position: siteLatLng,
      title: site[0],
      zIndex: site[3],
      html: site[4]
    });

    marker.setMap(map);

    var contentString = "Some content";

    google.maps.event.addListener(marker, "click", function () {
      infowindow.setContent(this.html);
      infowindow.open(map, this);
    });
  }
}

Basically all google map overlays like markers and polylines work the same way, calling setMap(map) on the object adds that overlay to the map.
overlay.setMap(map);

Hope it helps,

3

Thanks for trying to resolve my problem. Unfortunately I can not seem to make it work. I am not familiar enough with the code to understand what you have done and when I paste your code into my web page I get a blank page.
If… you had the time and interest could I ask you make your suggested code into a complete working page or show me where you would insert your sample into my markers sample.

Thanks again for your time

4

Bumping this back up to the top… I am still looking for a way to add a polyline to my Google map. Sample map at http://www.lsvs.ca/test/
When this post works its way to the next page I will abandon my search and live with markers only…
Thanks for your time and attention.