Wie Google Maps Polyline erscheinen

Question

Ich habe Probleme, eine Google Map Polylinie zu erscheinen, obwohl ich es in anderen Situationen, die sehr ähnlich sind, arbeiten. Diese Funktion zeichnet die Marker in Ordnung, aber aus irgendeinem Grund kein Pfad erscheint zwischen ihnen:

var map; 
function initGoogleMap() { 
    var myLatLng = { 
    lat: 10, 
    lng: -97 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
    zoom: 1, 
    center: myLatLng, 
    mapTypeId: 'satellite', 
    mapTypeControl: true, 
    streetViewControl: false, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
     mapTypeIds: ['roadmap', 'satellite'] 
    } 
    }); 
} 

function drawArray() { 
    var lats = ["51.5", "21.43", "30", "40.10"]; 
    var lons = ["-0.06", "-100.36", "-223.23", "-333.94"]; 
    var lastLat = 0; 
    var lastLon = 0; 
    for (var t = 0; t < lats.length; t++) { 
    var lat = lats[t]; 
    var lon = lons[t]; 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(lat, lon), 
     icon: "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png", 
     map: map 
    }); 
    var lineSymbol = { 
     // path: 'M 1,-1 1,1', 
     path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
     strokeOpacity: 1, 
     strokeColor: 'white', 
     scale: 1 
    }; 

    if (lastLat !== 0) { 
     $("#show").append("lastLat=" + lastLat + " lastLon=" + lastLon + "<BR>"); 
     $("#show").append("lat=" + lat + " lon=" + lon + "<BR>"); 
     var line = new google.maps.Polyline({ 
     path: [{ 
      lat: lastLat, 
      lng: lastLon 
     }, { 
      lat: lat, 
      lng: lon 
     }], 
     strokeOpacity: 0, 
     icons: [{ 
      icon: lineSymbol, 
      offset: '0', 
      repeat: '20px' 
     }], 
     map: map 
     }); 
    } 
    lastLat = lat; 
    lastLon = lon; 
    } 
} 

initGoogleMap(); 
drawArray(); 

Es gibt eine Geige bei https://jsfiddle.net/hfeist/t9z29f1q/

Answer 1

Verwenden

lats = [51.5, 21.43, 30, 40.10]; 
lons = [-0.06, -100.36, -223.23, -333.94]; 

statt,

var lats = ["51.5", "21.43", "30", "40.10"]; 
var lons = ["-0.06", "-100.36", "-223.23", "-333.94"]; 

JSFiddle demo