Question

我正在将一张非常基本的Google地图插入到我的页面中，并且缩放控件和街道图图标不可见，但是如果我将鼠标放在应该放置的位置，我可以缩放地图并输入街景。所以控件就不可见了。

<script type="text/javascript"
    src="//maps.googleapis.com/maps/api/js?key=<apikey>&sensor=false&region=IT">
</script>

var myOptions = {
    zoom: 17,
    center: latlng,
    panControl: true,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE
    },
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

任何想法可能是什么问题？

Missing controls

Answer 1

这绝对是您的代码中的CSS问题。查找适用于所有图像的CSS：

img {
  max-width: 100%;
}

Answer 2

我有这个问题，解决方法是包含这个CSS ......

.gmnoprint img { max-width: none; }

CSS选择器.gmnoprint img获取非打印[noprint]的Google Map [gm]控件上的所有图像[img]。在我的情况下，max-width已全局设置为100％。解决这个问题解决了这个问题。

Answer 3

仅适用于谷歌地图

的最佳解决方案

.gmnoprint img {
    max-width: none; 
}

Answer 4

请注意，目前甚至无法在触控设备（ipad等）上显示全尺寸缩放滑块。这是文档：

http://code.google.com/apis/maps/documentation/javascript/controls.html

google.maps.ZoomControlStyle.SMALL 显示迷你缩放控件，仅包含+和 - 按钮。此样式适用于小地图。 在触摸设备上，此控件显示为响应触摸事件的+和 - 按钮。

google.maps.ZoomControlStyle.LARGE 显示标准缩放滑块控件。 在触摸设备上，此控件显示为响应触摸事件的+和 - 按钮。

Answer 5

我遇到了一个变种，有令人讨厌的css看起来像：

＆＃13;

img {
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

因此，需要额外的一行：

#map_div img {
   max-width: none !important;
   max-height: none !important;
}

Answer 6

我有一个非常相似的问题，在我看来，这不是CSS问题。就我而言，我们网站上的Content-Security-Policy标头阻止了某些图像的呈现。在这种情况下，它阻止了街景图像（从* .ggpht.com uri加载）和使用data：方案指定的内嵌svg数据的按钮图标。为了解决这个问题，我在Content-Security-Policy标头中添加了以下内容：

img-src data: 'self' https://*.googleapis.com https://*.google.com https://*.gstatic.com https://*.ggpht.com

Answer 7

我认为这可能是浏览器或您正在嵌入此地图的页面中的代码的问题。

如果我看一下这个简单的hello world代码，地图控件就会显示出来。我将此地图编码到与您的样本相同的位置，因此它与位置无关。

使用此样本时会发生什么？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true&region=it">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(45.38686, 8.91927);
    var myOptions = {
    zoom: 17,
    center: latlng,
    panControl: true,
    zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE
        },
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

我的Google地图上没有显示缩放控制和街景视图？

7 个答案: