Карты Google не отображают полилинию

Question

У меня есть код tripCoordinates = [];

var coords[[37.772323, -122.214897],[21.291982, -157.821856],[-18.142599, 178.431]]; 
for(var i=0;i<coords.length;i++){           
    tripCoordinates.push(new google.maps.LatLng(coords[i][0],coords[i][1])); 
    } 

    console.log(tripCoordinates); 
    var tripPath = new google.maps.Polyline({ 
    path: tripCoordinates, 
    geodesic: true, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

    tripPath.setMap(map); 

и моя проблема заключается в том, что Google Maps оленьей кожи дисплея, данные на карте, если я добавить новый google.maps.LatLng (58.20554,23.58522), затем TAHT работает, но с петлей массива, что не будет работать, какие-либо предложения?

Возможно ли показывать данные таким образом?

Answer 1

я получаю ошибку Javacript с your fiddle (как только я это исправить, так что работает): Uncaught SyntaxError: Unexpected token [

на эта строка:

var coords[[37.772323, -122.214897], [21.291982, -157.821856], [-18.142599, 178.431]]; 

должно быть:

var coords = [[37.772323, -122.214897], [21.291982, -157.821856], [-18.142599, 178.431]]; 

Затем он работает working fiddle

Answer 2

tripCoordinates.push(new google.maps.LatLng(coords[i][0],coords[i][0])); 

Второй coords[i][0] должен быть coords[i][1]

function initialize() { 
 
    var mapOptions = { 
 
    zoom: 3, 
 
    center: new google.maps.LatLng(0, -180), 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 
    var coords = [ 
 
    [37.772323, -122.214897], 
 
    [21.291982, -157.821856], 
 
    [-18.142599, 178.431] 
 
    ]; 
 

 
    tripCoordinates = []; 
 
    for (var i = 0; i < coords.length; i++) { 
 
    tripCoordinates.push(new google.maps.LatLng(coords[i][0], coords[i][1])); 
 
    } 
 

 
    console.log(tripCoordinates); 
 
    var tripPath = new google.maps.Polyline({ 
 
    path: tripCoordinates, 
 
    geodesic: true, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 2 
 
    }); 
 

 
    tripPath.setMap(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>