Problème avec google.maps.event.trigger (mapper, "redimensionner") dans les onglets jquery

Question

J'ai un bouton nommé update details .En cliquant sur le bouton, une boîte de dialogue contenant 3 onglets est créée. Dans le troisième onglet, un champ nommé carte est là où les utilisateurs peuvent sélectionner leur emplacement dans la carte.J'ai 2 champs cachés qui contiennent la latitude et la longitude de l'utilisateur stockés dans la base de données.Si les valeurs sont nulles, je dois montrer le marqueur à leur emplacement actuel.Mon code est le suivant.

<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> 

Lorsque j'exécute ce code, il affiche l'erreur suivante.

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

Answer 1

Vous appelez google.maps.event.trigger avant que vous avez ajouté l'appel à charger le google maps javascript. Peut-être juste échanger les deux parties de ce qui se passe dans votre 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 
      } 
     } 
    }); 
});