Javascript: Location name is not changing but data is
<p>I am using the google maps api and the dark skys api to create a weather app. Initially when the app is fired up from localhost (i'm just using a python simple server)the browser gets the users location and prints it to the screen with the it's corresponding data. </p>

<p>However, when I type in another location and hit search the weather data changes but the location stays the same.</p>

<p>Any help would be much appreciated. </p>

<p>JS</p>

<pre><code>// Global Variables
var geoLocation = {lat: 40.7127837, lng: -74.0059413};
var city = 'New York City';

$(document).ready(function(){
  $('#selected-city').keypress(function(e){
    if(e.which == 13){
      ajaxReqForLatLon();
      setTimeout(function(){
        initMap(geoLocation);
      }, 500);
    }
  });
  // console.log(ajaxReqForLatLon);
  $('#search-button').on('click', function(){
    ajaxReqForLatLon();
  });
  $('.btn.btn-success.btn-block').on('click', function(){
    $('#selected-city').val("").focus();
  });

  // Traffic
  // Google Maps
  function ajaxReqForLatLon(){
    var userRequestedLocation = selectedCity();
    var googleApiURL = 'https://maps.googleapis.com/maps/api/geocode/json?address=';
    googleApiURL += userRequestedLocation;
    googleApiURL += '&amp;key=API_KEY';

    $.ajax({
      type: 'GET',
      url: googleApiURL,
      success: function(response){
        geoLocation = googleApiSuccessHandler(response);
        weatherData();
      },
      error: function(jqXHR, textStatus, errorThrown){
        console.log(errorThrown);
      }
    });
  }

  // take response from ajax and take the geolocation
  function googleApiSuccessHandler(response){
    var geoLocation = response.results[0].geometry.location;
    return geoLocation;
  }

  function selectedCity(){
    city = $('#selected-city').val().trim();
    if(city.length === 0){
      $('#selected-city').addClass('animated shake');
      $('#selected-city').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $('#selected-city').removeClass('animated shake');
      });
      return;
    };
    return city;
  }

  $('#selected-city').keypress(function(e){
    if(e.which == 13){
      ajaxReqForLatLon();
      setTimeout(function(){
        initMap(geoLocation);
      }, 500);
    }
  });

  // Map on page load
  setTimeout(function(){
    initMap(geoLocation);
  }, 500);

  var triggerOnce = true;
  function initMap(geoLocation){
    var map = new google.maps.Map(document.getElementById('map'),{
      zoom: 12,
      center: geoLocation,
      scrollWheel: false
    });

    var marker = new google.maps.Marker({map : map});

    if(triggerOnce){
      triggerOnce = false;

      if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(position){
          geoLocation.lat = position.coords.latitude;
          geoLocation.lng = position.coords.longitude;
          var pos = {
            lat : position.coords.latitude,
            lng : position.coords.longitude
          };
          reverseGeocode();
          weatherData();
          setTimeout(function(){
            $(".location").html(city);
          }, 500);
          marker.setPosition(pos);
          map.setCenter(pos);
        }, function(){
          handleLocationError(true, marker, map.getCenter());
        });
      } else {
        handleLocationError(false, marker, map.getCenter());
      }
    }

    function handleLocationError(browserHasGeolocation, marker, pos){
      marker.setPosition(pos);
      weatherData();
    }
    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);
  }

  // Reverse Geocode 
  function reverseGeocode(){
    var googleRevGeoApiURL = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=';
    googleRevGeoApiURL += geoLocation.lat + ',' + geoLocation.lng;
    googleRevGeoApiURL += '&amp;key=AIzaSyCh5Q8_EFHuuQKVb4O3esOvemg-nFe6X0U';

    $.ajax({
      type: 'GET',
      url: googleRevGeoApiURL,
      success: function(response){
        city = response.results[0].address_components[2].long_name;
      },
      error: function(jqXHR, textStatus, errorThrown){
        console.log(errorThrown);
      }
    });
  }

  // Weather
  var weatherData = function(){
    var geoLocLat = geoLocation.lat;
    var geoLocLon = geoLocation.lng;
    var forecastURL = 'https://api.forecast.io/forecast/80b1dfb6da9003b42f0dd846a0f08703/' + geoLocLat + ',' + geoLocLon;
    var data;
    $.getJSON(forecastURL + '?callback=?', function(data){
      $('#weather').html('Today: ' + data.currently.summary + '&lt;br&gt;' + 'Currently: ' + data.currently.temperature.toFixed(0) + '&amp;deg; F' + '&lt;br&gt;' + 'High: ' + data.daily.data[1].temperatureMax.toFixed(0) + '&amp;deg; F');
    });
  };
});
</code></pre>

<p>HTML</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container"&gt;
  &lt;br&gt;
  &lt;input type="search" id="selected-city" class="form-control" placeholder="Enter City" autofocus&gt;
  &lt;button id="search-button" class="btn btn-success btn-block" type="submit"&gt;Search&lt;/button&gt;
  &lt;br&gt;
  &lt;h2 class="location"&gt;&lt;/h2&gt;
  &lt;h4 id="weather"&gt;&lt;/h4&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh5Q8_EFHuuQKVb4O3esOvemg-nFe6X0U&amp;signed_in=true&amp;callback=initMap" async defer&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="meteocast.js"&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>