how to add a simple polylines to the Map Api Gmaps v3?

Asked

Viewed 505 times

1

I cannot visualize the line on the map the code is apparently correct not break in any lines ,when viewed by the console . no longer visualize the line.

 function initialize() {
        var latlng = new google.maps.LatLng(latitudes, longitudes);

        var options = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("mapa"), options);
        geocoder = new google.maps.Geocoder();

        if (coord.length > 1) {
            for (var i = 0; i < coord.length; i++) {
                var location = coord[i].split(",");

                pontos[i] = new google.maps.LatLng(location[0], location[1]);

            }

            var flightPath = new google.maps.Polyline({
                path: pontos,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 3,
                map: map,
            });

            flightPath.setMap(map);
        }
    }

    initialize();
  • What is your doubt?

  • I can’t see the line on the map!

  • Explain your question in more detail in the body of the question

  • Your array pontos was defined and initialized?

  • yes declared the array inside the function until

  • I tried to reproduce exactly what you have here on Jsfiddle and it worked properly. See if you can compare it to what you have.

  • there are point limits? for my point array is a very long list!

  • I believe there is no limit. You have tried this test with a reduced number?

  • I did a test up with an array already defined with some items. and still does not generate.

Show 4 more comments

1 answer

1


   var flightPath = new google.maps.Polyline({
            path: pontos,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 3,
            map: map
        });

You do not need the comma in the last parameter.

        map = new google.maps.Map(document.getElementById("mapa"), options);

To div of your map is actually called "map", if you named it so ok, but often it is "map-canvas" or "map", as in the example, if you changed ok!

I believe it’s just the comma at the end of the flightPath.

  • I did some tests and I think there are coordinates limits to do the Polyline, I can only draw it with 8 coordinates if it goes beyond that shows nothing!

  • I think that there are no limits, because drawing trace Polyline with various coordinates, look... var flightPath = new google.maps.Polyline({&#xA; geodesic: true,&#xA; strokeColor: '#0000FF',&#xA; strokeOpacity: 1.0,&#xA; strokeWeight: 2,&#xA; map: map&#xA; }); ai then I add the dots... flightPath.getPath().push(linha[i]); a line is a Latlng array

  • Besides Polyline I can see at the same time the marker on the map?

  • Yes @Hansmiller, I use this function setInterval(function () {&#xA; clearMarkers();//limpo os marker&#xA; linha[i] = new google.maps.LatLng(latitude,longitude);&#xA; flightPath.getPath().push(linha[i]); //cria a linha&#xA; i++;&#xA;addMarker(new google.maps.LatLng(latitude, longitude));// adiciono novamente o marker na nova posição}, 1000); this Function runs every 1000 ms, and Marker will be in the last position of the line [https://www.youtube.com/watch?v=V_PCvjVwHww]

Browser other questions tagged

You are not signed in. Login or sign up in order to post.