Home / Questions / 375098
Accepted
Ricardo Sauceda
Asked: 2020-07-22 00:09:10 +0800 CST 2020-07-22 00:09:10 +0800 CST

(Google Maps API) How to get *coordinates* from an array of Markers in Javascript

  • 772

With my code I create an array of Google Maps Markers, where I need pointA and pointB to paint a route on the map and calculate the kilometers.

function addMarker(location, addrs, counter) {

            if(counter <= 2){ 

                    marker = new google.maps.Marker({
                    position: location,
                    map: exports.map,
                    animation: google.maps.Animation.DROP,
                    title: "Point: "+ counter + "Address:" + addrs
                });

                exports.markers.push(marker);

            }else{
                calculateRoute();
                alert("Ya terminaste de seleccionar la ruta");

            }
        } // Sets the map on all markers in the array.

Once I capture my 2 Markes, I would like to display and paint the path between pointA and pointB.

So, I made a function called calculateRute() where I read my array of Markers and get the position (which are my POINTO and OBPOINT coordinates), I assign it to another array where I just want to put the coordinates and show them in an ALERT (), so far so good.

function calculateRoute(){
        
        for (var i = 0; i < exports.markers.length; i++) {
            maping[i] = exports.markers[i].position;
            //show my coordenates
            alert(maping[i]);
        }

        var request = {
            origin: maping[0],
            destination: maping[1],
            travelMode: 'DRIVING'
        }

        directionsService.route(request, function(result, status){

            if (status=="OK") {

                directionsDisplay.setDirections(result);
            }
        })
    }

enter image description here enter image description here

When we go to request and pass the attributes of the ARRAY of COORDINATES (pointA and pointB) by their position to ORIGIN and DESTINATION, IT DOES NOT SHOW ME ANYTHING.

enter image description here

I can't get the coordinates as such and assign them, I don't understand why it doesn't work the way I'm handling it.

Logical, in the end it only paints my two Markers and doesn't paint the route because I don't get the coordinates.

enter image description here

javascript

1 Answers

  1. Best Answer

    I managed to get the longitude and latitude by doing 2 arrays, I don't think it's the best option, but it has worked for me so far:

    function calculateRoute(){

            var lang = [];
            var lat = [];

            for (var i = 0; i < exports.markers.length; i++) {
                lat[i] = exports.markers[i].getPosition().lat();
                lang[i] = exports.markers[i].getPosition().lng();
                //alert("LAT: " + lat[i] + " LANG: " + lang[i]);
            }

            var location_a, location_b;

            location_a = lat[0] +","+ lang[0];
            location_b = lat[1] +","+ lang[1];
            

            var request = {
                origin: location_a,
                destination: location_b,
                travelMode: 'DRIVING'
            }

            directionsService.route(request, function(result, status){

                if (status=="OK") {
                    setMapOnAll(null);
                    directionsDisplay.setMap(map);
                    directionsDisplay.setDirections(result);
                    // Calculate and display the distance between markers
                    calculateDistance(location_a, location_b);
                }
            })
        }
    • 0