Google Maps API v3 Polyline does not show when updated

Question

I want to draw markers with polylines as a connection between them on a google map. But I have trouble showing my polyline on google maps. i have initialized the polyline and the map as global variables. the markers are showing but the polylines just doesn't render.

function initialize() {
var mapOptions = {
    zoom : 13,
    center : oldenburg,
    mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var polyOptions = {
        strokeColor : '#FF3333',
        strokeOpacity : 1.0,
        strokeWeight : 3
    };
    path = new google.maps.Polyline(polyOptions);
    path.setMap(map);
}
function addPlaces(orte) {

for ( var i = 0; i < orte.length; i++) {
    var ort = toLatLng(orte[i][0], orte[i][1]);
     path.getPath().push(ort);

    marker = new google.maps.Marker({
        position : ort,
        title : '#' + orte[i][2],
        icon : image,
        map : map
    });
}

}

Answer 1

Try and specify the path when instantiating the polyline:

EXAMPLE: Google example coordinates

var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];

Using the coordinates on your code as example

var polyOptions = {
    path: flightPlanCoordinates, //IMPORTANT TO SET the PATH for the line to RENDER
    strokeColor : '#FF3333',
    strokeOpacity : 1.0,
    strokeWeight : 3
};

OR as Google documentation example using the above coordinates:

 var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });