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);
});