Getting a marker to update with API call data

Question

I have an input box where user enters a city name and the updateMap function executes. It geolocates and maps the city with a marker. This then calls another function called updateTemp to update the marker title with the current temperature. I use ajax to get the temperature. I am very new to Javascript and was hoping to get a reason why the below code doesn't work (for educational purposes) and some solution.

<input id="cityInput" class="controls" type="text" placeholder="Search Box">
<input name="buttonExecute" onclick="updateMap(document.getElementById('cityInput'))" type="button" value="Execute" />
<div id="map"></div>


    <script>

      function updateMap(obj) {
            var geo = new google.maps.Geocoder();

            geo.geocode({'address':obj.value},function(results,status){
                        if(status == google.maps.GeocoderStatus.OK){
                               var lat = results[0].geometry.location.lat();   
                               var lng = results[0].geometry.location.lng();
                               var latlng = new google.maps.LatLng(lat,lng);
                               var mapOptions = { center: latlng, zoom: 6,vmapTypeId: google.maps.MapTypeId.ROADMAP};
                               var mapElement = document.getElementById('map');
                               var map = new google.maps.Map(mapElement,mapOptions);
                               var latlngString = lat.toString() +','+lng.toString(); 
                               var URL = "https://api.forecast.io/forecast/APIKEY/"+latlngString;
                               var marker = new google.maps.Marker({position:latlng, map:map});
                               updateTemp(URL,marker) 
                        }
            });       
        }

        function updateTemp(URL,marker){

                    $.ajax({
                             url: URL,
                             jsonp: "callback",
                             dataType: "jsonp",
                             success: function( response) {
                                    var t = response['currently']['temperature'];
                                    var msg = 'CURRENT TEMPERATURE: ' + t + 'F';
                                    marker.setTitle(msg);
                             },
                            async:false
                        });


        }


    </script>

Answer 1

this works for me when I put my key in. Note the ajax change.

function updateMap(obj) {

        var geo = new google.maps.Geocoder();
        geo.geocode({'address':obj.value},function(results,status){

                    if(status == google.maps.GeocoderStatus.OK){
                           var lat = results[0].geometry.location.lat();   
                           var lng = results[0].geometry.location.lng();
                           var latlng = new google.maps.LatLng(lat,lng);
                           var mapOptions = { center: latlng, zoom: 6,vmapTypeId: google.maps.MapTypeId.ROADMAP};
                           var mapElement = document.getElementById('map');
                           var map = new google.maps.Map(mapElement,mapOptions);
                           var latlngString = lat.toString() +','+lng.toString(); 
                           var URL = "https://api.forecast.io/forecast/68a746738dddfee5ac67c77bcb97e59b/"+latlngString;
                           marker = new google.maps.Marker({position:latlng, map:map});
                           updateTemp(URL,marker) 
                    }
        });  
    }

    function updateTemp(URL,marker){

                $.ajax({
                        url: URL,
                         type: "GET",
                        dataType: "jsonp",
                         success: function(response) {
                                var t = response['currently']['temperature'];
                                var msg = 'CURRENT TEMPERATURE: ' + t + 'F';
                                marker.setTitle(msg);
                         }
                    });

    }

Answer 2

Your marker variable is local to the geocoder callback function. Make it global (or local to the updateMap function).

proof of concept fiddle

(simulates the ajax call with a call to setTimeout, give it 10 seconds to update the title of the marker)

code snippet:

var marker;
function updateMap(obj) {
  var geo = new google.maps.Geocoder();

  geo.geocode({
    'address': obj.value
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var lat = results[0].geometry.location.lat();
      var lng = results[0].geometry.location.lng();
      var latlng = new google.maps.LatLng(lat, lng);
      var mapOptions = {
        center: latlng,
        zoom: 6,
        vmapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var mapElement = document.getElementById('map');
      var map = new google.maps.Map(mapElement, mapOptions);
      var latlngString = lat.toString() + ',' + lng.toString();
      var URL = "https://api.forecast.io/forecast/APIKEY/" + latlngString;
      marker = new google.maps.Marker({
        position: latlng,
        map: map
      });
      updateTemp(URL, marker)
    }
  });
}

function updateTemp(URL, marker) {

/*  $.ajax({
    url: URL,
    jsonp: "callback",
    dataType: "jsonp",
    success: function(response) {
      var t = response['currently']['temperature'];
      var msg = 'CURRENT TEMPERATURE: ' + t + 'F';
      marker.setTitle(msg);
    },
    async: false
  }); */
  setTimeout(function() {
  marker.setTitle("90 degrees");
  }, 10000);


}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="cityInput" class="controls" type="text" placeholder="Search Box">
<input name="buttonExecute" onclick="updateMap(document.getElementById('cityInput'))" type="button" value="Execute" />
<div id="map"></div>