Javascript: название местоположения не меняется, но данные

Question

Я использую Google Maps api и темные skys api для создания приложения погоды. Первоначально, когда приложение запускается из localhost (я просто использую простой сервер python), браузер получает местоположение пользователя и выводит его на экран с соответствующими данными.

Однако, когда я печатаю в другом месте и нажимаю поиск изменений погодных данных, но местоположение остается неизменным.

Любая помощь будет высоко оценена.

JS

// 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 += '&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 += '&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 + '<br>' + 'Currently: ' + data.currently.temperature.toFixed(0) + '&deg; F' + '<br>' + 'High: ' + data.daily.data[1].temperatureMax.toFixed(0) + '&deg; F'); 
    }); 
    }; 
}); 

HTML

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

</body> 
</html> 

Answer 1

вы активизировали ли через него в отладчике, чтобы увидеть, где неудача? Если это не удобно с отладчиком, возможно, вы могли бы добавить несколько строк console.log для проверки значения в основных переменных или для документа, если map.setCenter (pos) даже запускается в том случае, когда вы спрашиваете около.