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

【问题标题】：Zoom control and streetview not showing on my Google map?缩放控制和街景没有显示在我的 Google 地图上？
【发布时间】：2012-01-20 15:18:51
【问题描述】：

我在我的页面中插入了一个非常基本的谷歌地图，缩放控件和街道地图图标不可见，但是如果我将鼠标放在它们应该在的位置上，我可以缩放地图并进入街景。所以控件在那里是不可见的。

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

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

【问题讨论】：

Google Maps zoom control的可能重复

标签： css google-maps google-maps-api-3

【解决方案1】：

我有一个非常相似的问题，在我的情况下它不是 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

【讨论】：

【解决方案2】：

我遇到了一个变种，有问题的 css 看起来像：

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

所以，需要另外一行：

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

【讨论】：

【解决方案3】：

仅适用于 google map

的最佳解决方案

.gmnoprint img {
    max-width: none; 
}

【讨论】：

【解决方案4】：

我遇到了这个问题，解决方法是包含这个 CSS ...

.gmnoprint img { max-width: none; }

CSS 选择器.gmnoprint img 获取 Google 地图 [gm] 控件上所有非打印 [noprint] 的图像 [img]。就我而言，max-width 已全局设置为 100%。取消设置可以解决问题。

【讨论】：

有时可能需要大锤：.gmnoprint img { max-width: none !important; }
对这个修复的测试者说一句鼓励的话：我准确地应用了它，但发现它不起作用。继续执行其他任务。最终，大约一天后，最终清理了我页面中 html 的其他问题——删除了一个额外的
，让我的容器都包含了正确的东西，yada yada——当我的工具像魔术一样时刚刚出现在下一页刷新。 html/css 世界是一个敏感的世界。保持冷静并继续编码。

【解决方案5】：

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

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

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

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

【讨论】：

【解决方案6】：

这绝对是您的代码遇到的 CSS 问题。寻找适用于所有图像的 CSS，例如：

img {
  max-width: 100%;
}

【讨论】：

谢谢，我有一个响应式页面布局，并按照Responsive Web Design 中的建议将最大图像宽度设置为 100%。我使用#map_container img { max-width:none; } 修复了它。
@skarE！你为我节省了很多时间。谢谢
在第一次搜索时，我没有在我的 css 中找到这样的代码，但我使用的是 Twitter Bootstrap 框架，它使用了这种流畅的图像调整。
是的，请注意所有 Twitter Bootstrap 用户！他们的 CSS 会导致这种情况。在引导 CSS 包含后的任何位置添加 .gmnoprint img { max-width: none; }（如 @Pete 所述）将解决此问题。
Zubr 基金会也这样做：/

【解决方案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>

【讨论】：