谷歌地图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

我不得不添加了谷歌地图调用