Question

I've created a code to draw on a map a drawing direction but with polyline because with waypoints I can just see eight points.

First I have a function nArray() which returns me a value like the one shown in this console:

 Array[5]
    0: Object
    1: Object
         DISTANCE_FROM_PREVIOUS_OBJECT_LOCATION: 2.087970147789207
         lat: "48.866588"
         leftPosition: 183
         lng: "2.309037999999987"
         topPosition: 57
            __proto__: Object
    2: Object
    3: Object
    4: Object
    length: 5
    __proto__: Array[0]

Now I want to all objects (latitude, longitude) set as a point in:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
        <script>
        var map = null;
        var directionService = null;
        var directionsRenderer = null;

        var bigArray = nArray();

        function initialize() {
          var mapOptions = {
            center: new google.maps.LatLng(35.75936182169444, -90.35907120698232),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 4
          };
          map = new google.maps.Map(document.getElementById("map"), mapOptions);
          directionService = new google.maps.DirectionsService();
          directionsRenderer = new google.maps.DirectionsRenderer({ map: map });      
        }

        function drawDirections(myPath) {
            var myLine = new google.maps.Polyline({
                path: myPath,
                strokeColor: '#ff0000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
            myLine.setMap(map);
        }

        function drawRoutes() {
            var i;
            var npts = bigArray.length - 1;

            for (i = 0; i < npts; i++) {
                var marker = new google.maps.Marker({
                  map: map,
                  position: new google.maps.LatLng(bigArray[i].lat, bigArray[i].lng)
                });
                var request = {
                  origin: new google.maps.LatLng(bigArray[i].lat, bigArray[i].lng),
                  destination: new google.maps.LatLng(bigArray[i + 1].lat, bigArray[i + 1].lng),
                  travelMode: google.maps.DirectionsTravelMode.DRIVING
                }

                directionService.route(request, function(result, status) {
                    //route = result.routes[0];
                    if (status == google.maps.DirectionsStatus.OK) {
                        drawDirections(result.routes[0].overview_path);
                    }
                });
            }

            var marker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(bigArray[i].lat, bigArray[i].lng)
            });
        }
        </script>
    </head>
    <body onload="initialize();">
        <div id="map" style="width: 500px; height: 400px;"></div>
        <input type="button" onclick="drawRoutes()" value="Draw Routes" />
    </body>
</html>

How to get the latitude and longitude for every object from nArray?

Was it helpful?

Solution

You currently already get latitude and longitude for every object in your loop, but there are 2 issues:

  1. to get the same result as when you use the DirectionsRenderer with waypoints, you must use the result(e.g. result.routes[0].legs[0].start_location ) to set the position of the Markers, otherwise the Markers will not be placed on the route

  2. you should forget this approach to exceed the waypoints-limit, there is a limit of 10 requests per second, you soon will get the response "OVER_QUERY_LIMIT"

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top