How to Execute ajax async call after getCurrentPosition callback.

Question

I have got current location using browser Navigator getCurrentPosition. In the getCurrentPosition callback function, I need to get the address from lat and long. I get static maps image alone.

Problem: Code gets execute before appending Reverse Geocoded address to #addressText

  var mapImage;
  var addressDiv="<div id='addressCard'><img id="staticMap" src="/*MAP GOES THERE*/" /><p id="addressText"></p></div>
  addressDiv= $(addressDiv);
  if (navigator.geolocation) {
    var gotMap = navigator.geolocation.getCurrentPosition(function(position) {
      pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      mapImage = "https://maps.googleapis.com/maps/api/staticmap?center=" + pos.lat + "," + pos.lng + "&zoom=15&size=300x300&maptype=roadmap&markers=color:red&key=/*GOOGLE KEY GOES HERE*/";

      //static map added correctly.
      addressDiv= addressDiv.find("#staticMap").attr('src', mapImage);

      var REVERSE_GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + pos.lat + '%2C' + pos.lng + '&language=en';

      $.getJSON(REVERSE_GEOCODING).done(function(location) {
        console.log("location", location);
 addressDiv=addressDiv.find("#addressText").html(location[0].formatted_address );

        //getting address but not appending to addressDiv. It shows only map image.

      });
    });

The result should contain both map and address but it doesn't show up. it shows only static map image alone.

Answer 1

I'm going to assume the mis-matched quotes in the first string as simply a typo in your question, as the logic flow wouldn't have got to the geolocation otherwise.

With that in mind, the issue is because you're re-assigning addressDiv to the string result of attr() . You're also doing the same later on as a result of the html() method, which changes the targeted element.

To fix the problem, simply remove those assignments. You don't have to always use the response from a jQuery method call. Try this:

var mapImage, addressDiv = '<div id="addressCard"><img id="staticMap" src="/*MAP GOES THERE*/" /><p id="addressText"></p></div>';
var $addressDiv = $(addressDiv);

if (navigator.geolocation) {
  var gotMap = navigator.geolocation.getCurrentPosition(function(position) {
    pos = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    mapImage = "https://maps.googleapis.com/maps/api/staticmap?center=" + pos.lat + "," + pos.lng + "&zoom=15&size=300x300&maptype=roadmap&markers=color:red&key=/*GOOGLE KEY GOES HERE*/";
    $addressDiv.find("#staticMap").attr('src', mapImage); // remove variable assignment here

    var reverseGeocoding = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + pos.lat + '%2C' + pos.lng + '&language=en';
    $.getJSON(reverseGeocoding).done(function(location) {
      // remove variable assignment here
      $addressDiv.find("#addressText").html(location[0].formatted_address);
    });
  });

Also note that your pos object seems redundant. You can just concatenate position.coords.latitude and ..longitude directly in to the string.