Google Maps Api 未显示缩放按钮、街景或全屏图标？答案

【问题标题】：Google Maps Api not showing icons for zoom buttons, streetview, or fullscreen?Google Maps Api 未显示缩放按钮、街景或全屏图标？
【发布时间】：2019-01-20 19:41:19
【问题描述】：

SCREEN SHOT of map with custom markers, infowindows, and styling

问题：

Google 地图 API 出现问题。
我只是去自定义标记，并编辑弹出信息窗口文本，然后缩放按钮的图标消失，街景和全屏。

案例：

我尝试删除所有 CSS，除了需要渲染地图。我尝试了这些 CSS 技巧，看起来像 类似问题：
- Zoom control and streetview not showing on my Google map?
我还尝试删除所有用于标记和信息窗口的代码。谷歌按钮仍然是空白的。它们都可以工作（缩放、街景和全屏），但它们是空白的，不适合我的目的。

【问题讨论】：

没什么可添加的，但我在 10 分钟前左右的生产应用程序中看到了同样的东西。
就是这样！我认为谷歌今晚正在升级到 3.34。我将版本控制更改为季度，问题就消失了。 (maps.googleapis.com/maps/api/js?v=quarterly&key=YOUR_API_KEY&callback=initMap)

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

【解决方案1】：

您需要将您的版本更新到以下

 <script src="https://maps.googleapis.com/maps/api/js?v=quarterly&key=YOUR_API_KEY&callback=initMap"></script>

【讨论】：

为什么？这将如何解决问题中描述的问题？

【解决方案2】：

我们发现我们有一个针对我们网站上所有元素的 box-sizing CSS 规则：

* {box-sizing: border-box;}

为了解决图标显示问题，我们添加了一个针对谷歌地图内所有元素的类，以将 box-sizing 更改为 content-box。

.gmaps * {box-sizing: content-box;}

这为我们解决了问题。

【讨论】：

我只是在写同样的答案！干得好:)
OP 说他删除了所有的 CSS 并且问题仍然存在。上面的代码有什么帮助？

【解决方案3】：

与TFOH's answer 一起，确保从嵌入式 Google 地图中出现的任何 img 标签中删除任何最大宽度。我遇到了街景图标不显示的问题，因为我已将图像设置为 max-with: 100%，以便图像与其原始大小成比例。

img {height: auto, max-width: 100%}

.gmaps * {box-sizing: content-box;} .gmaps img {max-width: none;}

【讨论】：

【解决方案4】：

想再添加一个答案，因为现有答案都没有真正帮助我。希望它对遇到像我这样的问题的其他人有用。

在我的情况下，问题出在我用来包装谷歌地图的 div 的组件中。该组件具有缩放动画，改变了缩放道具。这不知何故让地图变得疯狂，并且缩放控件不可见（不在视图中）。

所以在我的情况下，解决方案是删除那个我不需要的动画。另一种解决方案可能是将地图显示延迟到动画结束。

具体来说，我在 Ant Design 的 Popover 组件中遇到了这个问题，其中地图显示在弹出窗口中。要解决它，您可以这样做：

  <Popover
    content={<YourMapComponent />}
    transitionName="" // <--- disable transition
  >
    Hover me
  </Popover>

【讨论】：