谷歌地图灰色[关闭]

Question

我想说我有一个相当简单的问题，这让我发疯。在我的客户网页上http://alminde-akupunktur.dk/ 在登录页面的底部，我使用谷歌地图作为背景。在我更新GoogleMapsAPI之后，地图变成了灰色，我还没有解决这个问题，控件和标记仍在显示。

有人能给我指出问题所在的正确方向吗？是我的CSS干扰了谷歌地图的呈现方式？

提前谢谢

Answer 1

相关问题：谷歌地图刷新灰色

从这个问题：

确保显示地图的div具有有效的大小，如果它被隐藏，它将具有零大小，并且您需要在显示div之前将其具有有效的大小。如果使用百分比调整大小，请确保其所有父元素都具有百分比大小或特定大小（有关详细信息，请参阅Mike Williams的Google Maps API v2教程）。

你的地图没有尺寸。如果我把你的相关代码移动到一个小提琴上，并给id="Frontpage-maps-bubas"的div一个大小，它对我来说是有效的。如果我添加的父div id="firtpage-map"没有任何CSS它变成灰色。如果我给div一个大小：

#frontpage-maps {
    height: 100%;
    width: 100%;
}

地图出现。

概念小提琴的证明

代码段：

function mapLoad() {
  console.log("map load...");

  // Google maps on front page
  function mapOption(zoom, type, draggable, scrollwheel) {
    return map_options = {
      center: new google.maps.LatLng(55.5661181, 9.4885967),
      zoom: zoom,
      panControl: false,
      zoomControl: false,
      scaleControl: false,
      navigationControl: false,
      mapTypeControl: false,
      overviewMapControl: false,
      streetViewControl: false,
      scrollwheel: scrollwheel,
      draggable: draggable,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{
        "featureType": "landscape",
        "stylers": [{
          "saturation": -100
        }, {
          "lightness": 65
        }, {
          "visibility": "on"
        }]
      }, {
        "featureType": "poi",
        "stylers": [{
          "saturation": -100
        }, {
          "lightness": 51
        }, {
          "visibility": "off"
        }]
      }, {
        "featureType": "road.highway",
        "stylers": [{
          "saturation": -100
        }, {
          "visibility": "simplified"
        }]
      }, {
        "featureType": "road.arterial",
        "stylers": [{
          "saturation": -100
        }, {
          "lightness": 30
        }, {
          "visibility": "on"
        }]
      }, {
        "featureType": "road.local",
        "stylers": [{
          "saturation": -100
        }, {
          "lightness": 40
        }, {
          "visibility": "on"
        }]
      }, {
        "featureType": "transit",
        "stylers": [{
          "saturation": -100
        }, {
          "visibility": "simplified"
        }]
      }, {
        "featureType": "administrative.province",
        "stylers": [{
          "visibility": "off"
        }]
      }, {
        "featureType": "water",
        "elementType": "labels",
        "stylers": [{
          "visibility": "on"
        }, {
          "lightness": -25
        }, {
          "saturation": -100
        }]
      }, {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [{
          "hue": "#ffff00"
        }, {
          "lightness": -25
        }, {
          "saturation": -97
        }]
      }]
    }
  }

  var mapCanvas = document.getElementById('frontpage-maps-canvas');

  if (mapCanvas) {
    var map_obj = new google.maps.Map(mapCanvas, mapOption(16, 16, true, true));

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(55.56595843045612, 9.482338428497314)
    });

    marker.setMap(map_obj);

    google.maps.event.addDomListener(window, "resize", function() {
      var center = map_obj.getCenter();
      google.maps.event.trigger(map_obj, "resize");
      map_obj.setCenter(center);
    });
  };
}
google.maps.event.addDomListener(window, "load", mapLoad);

html,
body,
#frontpage-maps-canvas,
#frontpage-maps {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="frontpage-maps">
  <div id="frontpage-maps-canvas"></div>
</div>

Answer 2

试着移动

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js'></script>

在标题部分，而不是html页面的底部。（是库请求，如果在代码使用之前完成，则更好）

Answer 3

这是一个CSS问题，在http://alminde-akupunktur.dk/wp-content/themes/Akupunkturklinikken/assets/css/style.css中设置img的最大高度：100%（此规则也会影响地图图块）

将此规则添加到CSS中：

.gm-style img{max-height:none;}