Google map code runs on form before variable value loads


#1

My student is creating a map on a form that shows the distance and path between two points. He is not using the appStudio widget. The code gets the location of the user fine, then gets an address from the user for the destination. This all works fine - unless the address comes from a different form. In that case, no destination shows on the map.

The Google api code is not in an event - it is just a couple of functions. Here is the code:

// want to use variable 'address' from another form for the destination
function initMap() {
setTimeout(function() { google.maps.event.trigger(map, 'resize') }, 600);
              // Try HTML5 geolocation.
     if (navigator.geolocation) {
            
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
                };

                window.pos = pos; 


                var directionsService = new google.maps.DirectionsService;
                var directionsDisplay = new google.maps.DirectionsRenderer;
      //  ourOrigin = new google.maps.LatLng(pos.lat, pos.lng);
                var map = new google.maps.Map(document.getElementById('map'), {
                  zoom: 13,
                  center: {lat: pos.lat, lng: pos.lng}
                  });
            directionsDisplay.setMap(map);

            calculateAndDisplayRoute(directionsService, directionsDisplay);


            });
            } else {
            // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }



        
       }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {

          console.log("Testing : "+pos);

        directionsService.route({
          origin:  new google.maps.LatLng(pos.lat, pos.lng),
          //destination: address,
          destination: "30 Dunster Street, Cambridge, MA 02138",
          //destination: document.getElementById('map').value,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }  

GoogleMap.onshow=function(){
  var GoogleAddress = addressSchool;
    Label18.textContent = GoogleAddress
}

#2

First, I edited your post. If you put three back ticks ``` before and after code, it will be formatted nicely on the screen as code.

This question is about how to use the Google Maps API. This wouldn’t normally be in scope for support, but I notice you have Premium Support. Great!

It’s tough to figure out these kinds of problems without being able to actually run the code, putting some console.log() statements in to trace the order of execution to see what is going on. Any chance you could email me a minimal working project which demonstrates the issue?


#3

Ryan, my student, figured it out.
We were including the “&callbackinitMap” in the global project ‘extraheaders’ portion of the the page. So, when the project ran, it was running that code and calling the function before the address variable had time to get filled . Took the callback portion out and then moved the call of the initMap function into an onShow of the form and it worked!