(Google map javascript api) - не отображает текущее местоположение пользователя

Question

Я использовал третий API для поиска текущего местоположения пользователя, а затем передаю latlng в функцию initMap, но ничего не отображается, кроме серого экрана, на котором должна отображаться карта. Я также проверил консоль на наличие ошибок, но их нет. Console.log также возвращает объект latlng с нужными значениями в нем. Вот код:

<script> 
    var mapDiv = document.getElementById('map'); 
    var pos; 
    $.get("http://ip-api.com/json", function(data) { 
     pos = new google.maps.LatLng(data.lat, data.lon); 
    }); 
    function initMap() { 
     var map = new google.maps.Map(mapDiv, { 
     zoom: 14, 
     center: pos, 
     mapTypeControl: false 
     }); 
     var marker = new google.maps.Marker({ 
     position: pos, 
     map: map, 
     draggable: false, 
     animation: google.maps.Animation.DROP, 
     title: 'Gotcha!' 
     }); 
     marker.setMap(map); 
    } 
</script> 

Answer 1

Попробуйте этот код

<script type="text/javascript"> 
     window.onload = function(){ 
     var mapDiv = document.getElementById('map'); 
     var pos; 
     $.get("http://ip-api.com/json", function(data) { 
      pos = new google.maps.LatLng(data.lat, data.lon); 
      initMap(); 
     }); 

     function initMap() { 
      var map = new google.maps.Map(mapDiv, { 
      zoom: 10, 
      center: pos 

      }); 
      var marker = new google.maps.Marker({ 
      position: pos, 
      map: map, 
      draggable: false, 
      animation: google.maps.Animation.DROP, 
      title: 'Gotcha!' 
      }); 
     } 
     } 

    </script>