Карты Google: полилиния из массива

Question

У меня есть небольшая проблема, и я потратил несколько часов, чтобы найти решение.

У меня есть массив, полный координат и записей. Дело в том, что я хочу получить полилинию, которая связывает все координаты точки в массиве. Размещение маркеров и инфо-окон в порядке, но я не могу получить полилинию.

Мне нужно пройти через массив по петле, потому что я хочу снова использовать тот же путь для других координат.

Может кто-нибудь мне помочь? Вот код:

var places = [ 
['New Delhi', 28.6139587,77.208684], 
['Amritsar', 31.643628, 74.859624], 
['Srinagar', 34.09, 74.79], 
['Kargil', 34.55, 76.133333], 
['Alchi', 34.2334, 77.1625], 
['Leh', 34.145397, 77.567614] 
]; 

for (c = 0; c < places.length; c++){ 
    var coords = new google.maps.LatLng(places[c][1], places[c][2]) 
    poly.push(coords); 
} 

console.log(poly); 

var Itinerary = new google.maps.Polyline({ 
    path: poly, 
    geodesic: true, 
    strokeColor: '#ffd500', 
    strokeOpacity: 1.0, 
    strokeWeight: 5 
}); 

Itinerary.setMap(map); 

Answer 1

У вас есть яваскрипта ошибка в вашем коде, публикуемый: Uncaught ReferenceError: poly is not defined.

working fiddle

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

var geocoder; 
 
var map; 
 
var poly = []; // added this 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var places = [ 
 
    ['New Delhi', 28.6139587, 77.208684], 
 
    ['Amritsar', 31.643628, 74.859624], 
 
    ['Srinagar', 34.09, 74.79], 
 
    ['Kargil', 34.55, 76.133333], 
 
    ['Alchi', 34.2334, 77.1625], 
 
    ['Leh', 34.145397, 77.567614] 
 
    ]; 
 

 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (c = 0; c < places.length; c++) { 
 
    var coords = new google.maps.LatLng(places[c][1], places[c][2]) 
 
    poly.push(coords); 
 
    bounds.extend(coords); 
 
    } 
 

 
    console.log(poly); 
 

 
    var Itinerary = new google.maps.Polyline({ 
 
    path: poly, 
 
    geodesic: true, 
 
    strokeColor: '#ffd500', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 5 
 
    }); 
 

 
    Itinerary.setMap(map); 
 
    map.fitBounds(bounds); 
 

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

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>