CODEWITHSUNDEEP
javascriptjsongoogle-mapsgoogle-maps-api-3
joshshulten
joshshulten

Reputation: 13

Having trouble getting coordinates from Google Maps API Javascript

I am using the google maps api and the directions service to retrieve information about two cities. My request retrieves json and I am using some of the response for other things, but I am not able to figure out how to get the coordinates from it.

As you can see they are listed as "a" and "b" under "Closure" and "[[Scopes]]" from the json response in the console, but I am not able to access them by calling something like

json.routes[0].legs[0].start_location.lat["[[Scopes]]"][0].b

I get an error of "Cannot read property '0' of undefined".

I think it has an something to do with it being inside [[Scopes]] but I can't figure out what to do

EDIT: to be clear my code looks something like this:

    var map;
    function initMap() {

        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: {lat: 43.16, lng: -77.61}
        });
        var geocoder = new google.maps.Geocoder();

        directionsDisplay.setMap(map);
        directionsDisplay.setOptions( { suppressMarkers: true } );

        var onChangeHandler = function() {
            directionsService.route({
                origin: document.getElementById('start').value,
                destination: document.getElementById('end').value,
            travelMode: 'DRIVING'
            }, function(response, status) {

                if (status === 'OK') {
                    getDirections(response);
                    directionsDisplay.setDirections(response);

                } else {
                    window.alert('Directions request failed due to ' + status);
                }
            });

        };
        document.getElementById('submit').addEventListener('click', onChangeHandler);

    }

function getDirections(json) {
    var time = json.routes[0].legs[0].duration.value;
    time = time/3600;
    startCityLat = json.routes[0].legs[0].start_location.lat["[[Scopes]]"][];
    startCityLon = json.routes[0].legs[0].start_location.lat["[[Scopes]]"][0].b;
    endCityLat = json.routes[0].legs[0].end_location.lat;
    endCityLon = json.routes[0].legs[0].end_location.lng;
}

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXX&callback=initMap">
</script>

Where in the getDirections function the time variable is retrieved fine, but start and end lat and lon are not

Upvotes: 0

Views: 316

Answers (1)

duncan
duncan

Reputation: 31930

start_location is a LatLng object. So you can use that directly, or if you want you can call the .lat() and .lng() functions. Ignore the various things you can see when you log that LatLng object to the console; you can just do

startCityLat = json.routes[0].legs[0].start_location.lat();
startCityLon = json.routes[0].legs[0].start_location.lng();

Upvotes: 4

Related Questions