Question

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

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

提前致谢

Answer 1

这是一个CSS问题，在http://alminde-akupunktur.dk/wp-content/themes/Akupunkturklinikken/assets/css/style.css max-height:100% img的{{1}}设置强迫（此规则也会影响地图图块）

将此规则添加到CSS：

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

Answer 2

尝试移动

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

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

Answer 3

相关问题：google maps refreshing grey

来自那个问题：

确保显示地图的div具有有效大小，如果它被隐藏，则它将具有零大小，并且您需要在它具有有效大小之前显示div。如果使用百分比调整大小，请确保其所有父元素具有百分比大小或特定大小（请参阅Mike Williams' Google Maps API v2 tutorial on the subject for details）。

您的地图没有尺寸。如果我将相关代码移动到小提琴并给div赋予id =＆＃34; frontpage-maps-canvas＆＃34;一个尺寸，它适合我。如果我添加父div与id =＆＃34; frontpage-maps＆＃34;没有任何CSS它变成灰色。如果我给那个div一个大小：

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

地图出现。

proof of concept fiddle

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

谷歌地图灰色

3 个答案: