Google地图未完全加载

Question

我已将Google地图与我的网站集成，并且未完全加载。看到下面的屏幕;

我已经通过使用下面给出的代码整合了它;

<script> 
    var geocoder, map; 
    // var myAddress = document.getElementById('address'); 

    var eineAdresseZH = 'MyAddress,Location' 

    function codeAddress(address) { 
     geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({ 
     'address': eineAdresseZH 
     }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var myOptions = { 
      zoom: 16, 
      draggable: false, 
      scrollwheel: false, 
      center: results[0].geometry.location, 
      styles: [ 
      { 
       "featureType": "administrative", 
       "elementType": "all", 
       "stylers": [ 
       { 
       "visibility": "off" 
       } 
       ] 
      }, 
      { 
       "featureType": "water", 
       "elementType": "geometry.fill", 
       "stylers": [ 
       { 
       "visibility": "on" 
       }, 
       { 
       "color": "#8c9ee1" 
       }, 
       { 
       "hue": "#001a76" 
       } 
       ] 
      }, 
      { 
       "featureType": "all", 
       "elementType": "labels.text.stroke", 
       "stylers": [ 
       { 
       "visibility": "off" 
       } 
       ] 
      }, 
      { 
       "featureType": "all", 
       "elementType": "labels.text.fill", 
       "stylers": [ 
       { 
       "visibility": "on" 
       }, 
       { 
       "color": "#c39619" 
       } 
       ] 
      }, 
      { 
       "featureType": "water", 
       "elementType": "labels.text.fill", 
       "stylers": [ 
       { 
       "visibility": "on" 
       }, 
       { 
       "color": "#001a76" 
       } 
       ] 
      }, 
      { 
       "featureType": "administrative.country", 
       "elementType": "geometry.stroke", 
       "stylers": [ 
       { 
       "visibility": "on" 
       }, 
       { 
       "color": "#c39619" 
       }, 
       { 
       "weight": 1.5 
       } 
       ] 
      }, 
      { 
       "featureType": "administrative.country", 
       "elementType": "labels.text.fill", 
       "stylers": [ 
       { 
       "visibility": "on" 
       }, 
       { 
       "color": "#c39619" 
       } 
       ] 
      }, 
      { 
       "featureType": "landscape", 
       "elementType": "geometry.fill", 
       "stylers": [ 
       { 
       "visibility": "on" 
       }, 
       { 
       "hue": "#c39619" 
       }, 
       { 
       "saturation": 40 
       }, 
       { 
       "lightness": -20 
       }, 
       { 
       "gamma": 5 
       } 
       ] 
      }, 
      { 
       "featureType": "road", 
       "elementType": "geometry.fill", 
       "stylers": [ 
       { 
       "visibility": "on" 
       }, 
       { 
       "color": "#ffffff" 
       } 
       ] 
      }, 
      { 
       "featureType": "road", 
       "elementType": "geometry.stroke", 
       "stylers": [ 
       { 
       "visibility": "off" 
       } 
       ] 
      }, 
      { 
       "featureType": "poi", 
       "elementType": "all", 
       "stylers": [ 
       { 
       "visibility": "off" 
       } 
       ] 
      }, 
      { 
       "featureType": "transit", 
       "elementType": "geometry.fill", 
       "stylers": [ 
       { 
       "visibility": "on" 
       }, 
       { 
       "hue": "#c39619" 
       }, 
       { 
       "saturation": 50 
       } 
       ] 
      }, 
      { 
       "featureType": "all", 
       "elementType": "labels.icon", 
       "stylers": [ 
       { 
       "visibility": "on" 
       }, 
       { 
       "hue": "#c39619" 
       } 
       ] 
      }, 
      { 
       "featureType": "administrative.locality", 
       "elementType": "labels.icon", 
       "stylers": [ 
       { 
       "visibility": "off" 
       }, 
       { 
       "color": "#646464" 
       } 
       ] 
      }, 
      { 
       "featureType": "road", 
       "elementType": "geometry.stroke", 
       "stylers": [ 
       { 
       "visibility": "on" 
       }, 
       { 
       "color": "#c39619" 
       }, 
       { 
       "saturation": -30 
       }, 
       { 
       "lightness": 70 
       } 
       ] 
      } 
      ] 
      } 
      map = new google.maps.Map(document.getElementById("map-canvasZH"), myOptions); 


      var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
      }); 
     } 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', codeAddress); 
    </script> 

    <div id="map-canvasZH"></div> 

我有多个谷歌地图在同一个页面，由不同的标签管理。当我们点击每个标签时，地图没有被完全加载。

如果有人知道解决方案，请帮我找到问题。

感谢，

Answer 1

试试这个：

$(yourtab).on("click", function() { 
     google.maps.event.trigger(map, 'resize'); 
     map.setCenter(yourSavedCenter); 
});