jquery 选项卡中的 google.maps.event.trigger(map, “resize”) 问题

Question

我有一个名为 update details 的按钮。单击该按钮会创建一个对话框，其中包含 3 tabs.In 第三个选项卡，其中有一个名为 map 的字段，用户可以在其中 select 他们的map.I 中的位置有 2 个隐藏字段，其中包含存储在 database.If 中的用户的纬度和经度，值为空，我需要向其当前显示标记 location.My 代码如下。

<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 地图 javascript 之前调用 google.maps.event.trigger。也许只是交换 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
            }
        }
    });
});

jquery 选项卡中的 google.maps.event.trigger(map, “resize”) 问题

Issue with google.maps.event.trigger(map, “resize”) in jquery tabs

ajax

google-maps

jquery-ui-dialog

jquery-tabs

google-geolocation