Javascript 谷歌地图在页面刷新之前不会呈现

var映射；
函数代码地址（）{
var地址=”；
geocoder=新的google.maps.geocoder（）；
控制台日志（地址）；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
//警报（“地理编码”）；
if（status==google.maps.GeocoderStatus.OK）{
变量映射选项={
中心：结果[0].geometry.location，
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
marker=新的google.maps.marker({
位置：结果[0]。geometry.location，
图标：“icons/orange\u marker.png”
});
marker.setMap（map）；
log（document.getElementById（“地图画布”）；
//警报（“标记完成”）；
console.log（结果[0].geometry.location）；
google.maps.event.trigger（映射，'resize'）；
}
否则{
警报（'找不到地址为'+状态〕）；
}
});
/google.maps.event.addDomListener（窗口'load'，codeaddress（））；//google.maps.event.trigger（映射，'resize'）；
}
$（文档）.ready（函数（）{
代码地址（）；
//google.maps.event.trigger（映射，'resize'）；
//警惕（“我在这里完成了”）；
});

---

每次刷新页面时，都会填充地图画布。我需要知道如何在不刷新页面的情况下填充地图画布。地址和地理代码在函数中计算，但地图不会填充

我也遇到了这个问题，我通过触发Google maps

resize

事件解决了这个问题

 var map;

 function codeaddress() {
     var address = "<?php echo $listing->get_address1()." ".$listing->get_city()." ".$listing->get_state(); ?>";
     geocoder = new google.maps.Geocoder();
     console.log(address);
     geocoder.geocode( { 'address': address}, function(results, status){
     //alert('geocoding');
     if(status == google.maps.GeocoderStatus.OK){
        var mapOptions = {
                 center: results[0].geometry.location,
                 zoom: 10,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
        };

     map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
     marker = new google.maps.Marker({
            position:results[0].geometry.location,
              icon:'icons/orange_marker.png'
     });
     marker.setMap(map);
     console.log(document.getElementById("map-canvas"));
     //alert('marker done');
     console.log(results[0].geometry.location);
     google.maps.event.trigger(map, 'resize');
     }
     else{
          alert('Could not find address as ' + status);
     }
      });
      /google.maps.event.addDomListener(window, 'load', codeaddress());//google.maps.event.trigger(map, 'resize'));
                    }
     $(document).ready(function(){
          codeaddress();
          //google.maps.event.trigger(map, 'resize');
          //alert('I am done here');
     });

---

希望您能理解。

我确实尝试过，我是否需要将呼叫放在其他位置？因此，如果我将地图的div放在a标记之外，在使用链接之前，它工作正常。该链接将在移动设备的浏览器上打开谷歌地图。单击浏览器上的“上一步”按钮后，地图工作正常，但如果我在web应用程序中移回上一页并尝试其他列表，它将不会呈现地图。

 var map;

 function codeaddress() {
     var address = "<?php echo $listing->get_address1()." ".$listing->get_city()." ".$listing->get_state(); ?>";
     geocoder = new google.maps.Geocoder();
     console.log(address);
     geocoder.geocode( { 'address': address}, function(results, status){
     //alert('geocoding');
     if(status == google.maps.GeocoderStatus.OK){
        var mapOptions = {
                 center: results[0].geometry.location,
                 zoom: 10,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
        };

     map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
     marker = new google.maps.Marker({
            position:results[0].geometry.location,
              icon:'icons/orange_marker.png'
     });
     marker.setMap(map);
     console.log(document.getElementById("map-canvas"));
     //alert('marker done');
     console.log(results[0].geometry.location);
     google.maps.event.trigger(map, 'resize');
     }
     else{
          alert('Could not find address as ' + status);
     }
      });
      /google.maps.event.addDomListener(window, 'load', codeaddress());//google.maps.event.trigger(map, 'resize'));
                    }
     $(document).ready(function(){
          codeaddress();
          //google.maps.event.trigger(map, 'resize');
          //alert('I am done here');
     });

google.maps.event.trigger(map, 'resize');