Проблема с google.maps.event.trigger (map, "resize") на вкладках jquery

Question

У меня есть кнопка с именем update details. Нажав на кнопку, будет создано диалоговое окно, содержащее 3 вкладки. На третьей вкладке поле с именем map где пользователи могут выбрать свое местоположение на карте. У меня есть 2 скрытых поля, которые содержат широту и долготу пользователя, хранящиеся в базе данных. Если значения равны нулю, мне нужно показать маркер в их текущем местоположении. Мой код выглядит следующим образом.

<script> 
$(document).ready(function(){ 
var directionsDisplay, 
directionsService, 
map; 
$("#tabs").tabs({ 
    show: function(e, ui) { 
     if (ui.index == 2) { 
      google.maps.event.trigger(map, "resize");//for showing google 
                 //map in tabs 
     } 
    } 
}); 

if(!window.google||!window.google.maps){ 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3&' + 
    'callback=initialize'; 
    document.body.appendChild(script); 
} 
else{ 
    initialize(); 
} 
}); 
</script> 


<script> 

//var directionsDisplay, 
//directionsService, 
//map; 

function initialize() { 
    //var directionsService = new google.maps.DirectionsService(); 
    //directionsDisplay = new google.maps.DirectionsRenderer(); 
if(($("#latitude_val").val().length >3) || ($("#longitude_val").val().length>3)) 
{ 
    var chicago = new google.maps.LatLng($("#latitude_val").val(), $("#longitude_val").val()); 
} 
else 
    { 
     geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({ 'address': 'Dubai internet city'}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) 
     { 
      console.log("Latitude: "+results[0].geometry.location.lat()); 
      console.log("Longitude: "+results[0].geometry.location.lng()); 
     } 
     else 
     { 
      console.log("Geocode was not successful for the following reason: " + status); 
     } 
      //console.log("latitude"+position.coords.latitude+'longitude='+position.coords.longitude); 
     }); 
    } 
    //chicago = new google.maps.LatLng(51.508742, -0.120850); 
    var mapOptions = { zoom:16, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } 
    map = new google.maps.Map(document.getElementById("googlemap"), mapOptions); 
    var marker=new google.maps.Marker({ 
      position:chicago, 
      map:map, 
      draggable:true, 
      animation: google.maps.Animation.DROP 
    }); 
     marker.setMap(map); 
     google.maps.event.addListener(
      marker, 
      'drag', 
      function() { 
       document.getElementById('latitude_val').value = marker.position.lat(); 
       document.getElementById('longitude_val').value = marker.position.lng(); 
       console.log($("#latitude_val").val()); 
console.log($("#longitude_val").val()); 
    } 

); 
    //directionsDisplay.setMap(map); 
    } 
    function fail(){ 
    alert('navigator.geolocation failed, may not be supported'); 
    } 
    </script> 

При запуске этого кода отображается следующая ошибка.

ReferenceError: google is not defined 
google.maps.event.trigger(map, "resize"); 

Answer 1

Вы звоните google.maps.event.trigger, прежде чем вы добавили вызов, чтобы загрузить Google Maps JavaScript. Может просто поменять местами две части того, что происходит в вашем document.ready

$(document).ready(function(){ 
    var directionsDisplay, 
    directionsService, 
    map; 

    if(!window.google||!window.google.maps){ 
     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.src = 'https://maps.googleapis.com/maps/api/js?v=3&' + 
     'callback=initialize'; 
     document.body.appendChild(script); 
    } 
    else{ 
     initialize(); 
    } 

    $("#tabs").tabs({ 
     show: function(e, ui) { 
      if (ui.index == 2) { 
       google.maps.event.trigger(map, "resize");//for showing google 
                  //map in tabs 
      } 
     } 
    }); 
});