[SOLVED] google map multiple polyline

google map multiple polyline

I have a google map sample with multiple polygons. I changed the new google.maps.Polygon function to polyline as

     new google.maps.Polyline({
                paths: arr,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            })

But it does not drawing the lines. Fiddle here. Also how to set object name to infowindow content. I tried with

 var infowindow = new google.maps.InfoWindow({
            content: i
        });

Edited fiddle.

Solution

A google.maps.Polyline doesn't have a paths property. Change:

 new google.maps.Polyline({
            paths: arr,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        })

To:

 new google.maps.Polyline({
            path: arr,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        })

updated fiddle

code snippet:

var map, infoWindow;

function initialize() {
    var mapOptions = {
      zoom: 5,
      center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var bounds = new google.maps.LatLngBounds();
    var polygons = [];
    var arr = new Array();
    var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    // Define the LatLng coordinates for the polygon's path.
    var coordinates = {
      "feed1": [
        [25.774252, -80.190262],
        [18.466465, -66.118292],
        [32.321384, -64.75737],
        [25.774252, -80.190262]
      ],

      "feed2": [
        [26.774252, -81.190262],
        [19.466465, -67.118292],
        [33.321384, -65.75737],
        [26.774252, -81.190262]
      ],

      "feed3": [
        [27.774252, -82.190262],
        [20.466465, -68.118292],
        [34.321384, -66.75737],
        [27.774252, -82.190262]
      ]
    };
    for (var i in coordinates) {
      arr = [];

      for (var j = 0; j < coordinates[i].length; j++) {
        arr.push(new google.maps.LatLng(
          parseFloat(coordinates[i][j][0]),
          parseFloat(coordinates[i][j][1])
        ));

        bounds.extend(arr[arr.length - 1])
      }

      // Construct the polygon.
      polygons.push(new google.maps.Polyline({
        path: arr,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
      }));
      polygons[polygons.length - 1].setMap(map);

      var infowindow = new google.maps.InfoWindow({
        content: "Hello World!"
      });

      google.maps.event.addListener(polygons[polygons.length - 1], 'click', function(event) {
        infowindow.open(map);
        infowindow.setPosition(event.latLng);
      });

    }
    map.fitBounds(bounds);


    //google.maps.event.addListener(arr, 'click', showArrays);
    // infoWindow = new google.maps.InfoWindow();
  }
  /*
  function showArrays(event) {

    var contentString = '<b>Bermuda Triangle polygon</b><br>';

    // Replace the info window's content and position.
    infoWindow.setContent(contentString);
   // infoWindow.setPosition(event.latLng);

    infoWindow.open(map);
  } */

google.maps.event.addDomListener(window, 'load', initialize);

html,
  body,
  #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>