Google Maps Api没有显示缩放按钮，街景视图或全屏图标吗？

Question

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

问题：

• 使用Google Maps API很麻烦。
• 我只是去自定义标记，并编辑弹出信息 窗口文本，然后图标消失，显示缩放按钮， 街景和全屏显示。

已尝试的案例：

• 我尝试删除所有CSS，除了 需要渲染地图。我尝试了这些CSS技巧，看起来像是 类似问题：

  • Zoom control and streetview not showing on my Google map?

• 我还尝试删除了用于标记和信息窗口的所有代码。 Google按钮仍然保持空白。它们都可以工作（缩放，街景和全屏显示），但是它们是空白的，对我而言不起作用。

Answer 1

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

* {box-sizing: border-box;}

为解决图标显示问题，我们添加了一个针对google地图中所有元素的类，以将框的大小更改为content-box。

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

这为我们解决了这个问题。

Answer 2

您需要将版本更新为以下版本

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

Answer 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;}

Answer 4

要再添加一个答案，因为现有的答案都无法真正帮助我。希望它对像我这样的问题的人有用。

就我而言，问题出在我用来包装Google Map的div的组件中。 该组件具有缩放动画，更改了比例道具。这以某种方式使地图发疯，并且缩放控件不可见（不在视图中）。

因此，在我的情况下，解决方案是删除该动画，无论如何我都不需要。另一个解决方案可能是将地图显示延迟到动画结束。

特别是我在Ant Design的Popover组件上遇到了这个问题，该组件在弹出窗口中显示地图。要解决它，您可以执行以下操作：

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