谷歌地圖V3灰瓦響應

Question

我使用谷歌地圖V3，一切是偉大的工作，預計瓦灰的問題，我不知道如何解決它，我也試過

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

，但它沒」不工作，或者我錯誤地粘貼了它。

當我嘗試移動地圖時，只顯示帶寬度和高度的地圖窗口，其餘爲灰色，當我使用百分比時，整個地圖爲灰色，我該如何解決這個問題？

<script type="text/javascript"> 

    $(document).ready(function() { 

     var styleArray = [{ 
      "featureType": "administrative.locality", 
      "elementType": "labels.text.fill", 
      "stylers": [{ 
       "color": "#365B6A" 
      }] 
     }, { 
      "featureType": "road.highway", 
      "elementType": "labels.text", 
      "stylers": [{ 
       "visibility": "on" 
      }] 
     }, { 
      "featureType": "landscape.man_made", 
      "elementType": "geometry.fill", 
      "stylers": [{ 
       "color": "#c4d3dc" 
      }, { 
       "weight": 0.1 
      }] 
     }, { 
      "featureType": "landscape.man_made", 
      "elementType": "geometry.stroke", 
      "stylers": [{ 
       "color": "#ffffff" 
      }] 
     }, 

      { 
       "featureType": "landscape.natural", 
       "elementType": "all", 
       "stylers": [{ 
        "visibility": "simplified" 
       }, { 
        "color": "#e1e9ee" 
       }] 
      }, { 
       "featureType": "poi", 
       "elementType": "all", 
       "stylers": [{ 
        "visibility": "off" 
       }] 
      }, { 
       "featureType": "water", 
       "elementType": "all", 
       "stylers": [{ 
        "visibility": "on" 
       }] 
      }, { 
       "featureType": "transit.station", 
       "elementType": "all", 
       "stylers": [{ 
        "visibility": "off" 
       }] 
      }, { 
       "featureType": "road.highway", 
       "elementType": "geometry.fill", 
       "stylers": [{ 
        "color": "#cfc824" 
       }] 
      }, { 
       "featureType": "road.highway", 
       "elementType": "geometry.stroke", 
       "stylers": [{ 
        "color": "#cfc824" 
       }] 
      }, { 
       "featureType": "road.arterial", 
       "elementType": "geometry.stroke", 
       "stylers": [{ 
        "color": "#4d6d7a" 
       }, { 
        "weight": 0.5 
       }] 
      }, { 
       "featureType": "road.arterial", 
       "elementType": "labels.text.fill", 
       "stylers": [{ 
        "color": "#4d6d7a" 
       }] 
      }, { 
       "featureType": "road.local", 
       "elementType": "labels.text.fill", 
       "stylers": [{ 
        "color": "#4d6d7a" 
       }] 
      }, { 
       "featureType": "road.highway", 
       "elementType": "labels.text.fill", 
       "stylers": [{ 
        "color": "#385c6b" 
       }] 
      }]; 


     var submoem = '/media/image/marker.png'; 
     var primarymoem = '/media/image/marker-main.png'; 

     var geocoder; 
     var markersArray = []; 

     var locationsArray = [ 
      '{$Data.bwrk_gmap_substore1}', 
      '{$Data.bwrk_gmap_substore2}', 
      '{$Data.bwrk_gmap_substore3}', 
      '{$Data.bwrk_gmap_substore4}' 
     ]; 

     function plotMarkers() { 
      for (var i = 0; i < locationsArray.length; i++) { 

       codeAddresses(locationsArray[i]); 

      } 
     } 


     geocoder = new google.maps.Geocoder(); 
     latlang = geocoder.geocode({ 
      'address': '{$Data.bwrk_gmap_mainstore}' 
     }, function (results, status) { 

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

      google.maps.event.trigger(map, 'resize'); 
      map.setCenter(results[0].geometry.location); 



      markersArray.push(marker); 
     }); 


     var mapOptions = { 
      {if $Data.bwrk_gmap_style}styles: styleArray, {/if} 
      center: latlang, 
      zoom: 15, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 

      mapTypeControl: {if $Data.bwrk_gmap_maptypecontrol}false{else}true{/if}, 
      scaleControl: {if $Data.bwrk_gmap_scaleControl}false{else}true{/if}, 
      zoomControl: {if $Data.bwrk_gmap_zoomControl}false{else}true{/if}, 
      panControl: {if $Data.bwrk_gmap_panControl}false{else}true{/if}, 
      navigationControl: {if $Data.bwrk_gmap_navigationControl}false{else}true{/if}, 
      streetViewControl: {if $Data.bwrk_gmap_streetViewControl}false{else}true{/if} 
     }; 

     var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
     plotMarkers(); 

     function codeAddresses(address) { 
      geocoder.geocode({ 
       'address': address 
      }, function (results, status) { 

       if (results.length > 0) { 
        new google.maps.Marker({ 
         map: map, 
         icon: submoem, 
         position: results[0].geometry.location 
        }); 
       } 
      }); 
     } 
    }); 

    $.ajax({ 
     async: false, 
     url: this.href, 
     success: function (result) { 
      console.log('success'); 
     }, 
     error: function (xhr, ajax, err) { 
      console.error('error: ' + JSON.stringify(xhr)); 
      console.error(JSON.stringify(err)); 
     } 
    }); 


</script> 
<style> 
    #map-canvas { 
     width: 100%; 
     height: 100%; 
    } 
</style> 
<div id="map-canvas"></div> 

Answer 1

如果僅僅表示高度的百分比大概是因爲它不是分配給包含在其中出現在地圖的DIV標籤的高度時產生的灰色部分的問題。通常是html和body標籤，或者如果您使用div的框架作爲頁面的容器。

嘗試添加

html, body { 
    height: 100%; 
} 

Answer 2

我不得不添加了谷歌地圖調用