google map несколько полилиний

Question

У меня есть google map sample с несколькими полигонами. Я изменил функцию new google.maps.Polygon к полилинии в

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

Но это не рисование линий. Fiddle here. Также как установить имя объекта для содержимого infowindow. Я пробовал с

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

Edited fiddle.

Answer 1

A google.maps.Polyline не имеет свойства paths. Изменение:

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

фрагмент кода:

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"></script> 
 
<div id="map-canvas"></div>

Answer 2

Изменение пути свойство к путь

так:

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