JavaScript variable empty

Question

I want to use "start" as a global variable for my starting point. So I declare it as a global variable and then set a value in the codeAdress function. The value is used to set a marker, which is working as expected. When I want to use the start variable in my calcRoute function it is undefined.

I'm using following code:

<script>
            var map;
            var uluru;
            var start; <-- Declaration
            var geocoder;

            function codeAddress() {
                var address = "Essen";
                geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    'address': address
                }, function(results, status) {
                    if (status == 'OK') {

                        start = results[0].geometry.location; <-- Setting value
                        
                        var marker = new google.maps.Marker({

                            position: start,
                            map: map
                        }); <-- Position is set, start has a value
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });

                calcRoute();
            }

            function calcRoute() {
                var directionsService = new google.maps.DirectionsService;
                var directionsDisplay = new google.maps.DirectionsRenderer({map: map});
                directionsService.route({
                    origin: start, <-- start is undefined
                    destination: uluru,
                    travelMode: 'DRIVING'
                }, function(response, status) {
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                    } else {
                        window.alert('Directions request failed due to ' + status);
                    }
                });
            }

        </script>

Long story short, the function that sets `start` isn't being run immediately since it's asynchronous. You need to chain callbacks or use a similar mechanism. — Carcigenicate, Aug 06 '17 at 15:52
Call `calcRoute` in the Geocoder callback function when/where `start` is set. — geocodezip, Aug 06 '17 at 17:25

score 2 · Accepted Answer · answered Aug 06 '17 at 15:55

You'll need to call calcRoute once start is set. And since start is set in the callback to the geocode API, you'll have to call calcRoute inside that callback, post setting start. Something like

geocoder.geocode({address: address}, function(results, status) {
  if (status == 'OK') {  
    start = results[0].geometry.location;
    // do the rest
    calcRoute();
  }
});

JavaScript variable empty

1 Answers1