2014-09-30 123 views
-1

我已將Google地圖與我的網站集成,並且未完全加載。看到下面的屏幕; enter image description hereGoogle地圖未完全加載

我已經通過使用下面給出的代碼整合了它;

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

我有多個谷歌地圖在同一個頁面,由不同的標籤管理。當我們點擊每個標籤時,地圖沒有被完全加載。

如果有人知道解決方案,請幫我找到問題。

感謝,

+0

是什麼使你的地圖的大小?你的地圖的CSS是什麼樣的? – geocodezip 2014-09-30 18:08:20

回答

1

試試這個:

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

謝謝,它部分爲我工作.. :) – 2014-10-01 07:35:41