Search code examples
javascriptgoogle-maps-api-3google-polyline

How to draw a polyline with many points in Google Maps ( and appear the polyine)?


Why when I want to draw a polyline using Google maps V3.0 (JavaScript API) which has many points (more than about 7 points) the ployline doesn't appear , despite when trying to draw a plolyine with a few number of points it appears ?

edit:

code

var polyOptions = {strokeColor: '#FF0000',strokeOpacity: 0.6,strokeWeight: 5}
var poly = new google.maps.Polyline(polyOptions);
var path = poly.getPath();
var bounds2 = new google.maps.LatLngBounds();

    for(var i=0;i<a.length;i++){
        var zz=a[i].split(",");
        bar lat=zz[0];
        var lng=zz[1];

        var point = new google.maps.LatLng(parseFloat(lng),parseFloat(lat));

        var icon = customIcons["dot"];
                createMarker(i,"test routing",point,icon,2);
            path.push(point);
            poly.setMap(map);
         }  

Solution

  • Can you share the code that doesn't work?

    Sometimes, it helps to set the map of the polyline even after you add it in the polyline options. Try something like:

    var mypolyline = new google.maps.Polyline({
                      map: map,
                      path: coords,
                      strokeColor: "#787878",
                      strokeOpacity: .6,
                      strokeWeight: 3,
                      clickable: false
                    });
    
    mypolyline.setMap(map);