谷歌地图（街景）嵌入一个div，全屏坏了

Question

我有一个google maps streetview，效果很好：

<div class=\"street_view\" data-address = "30 Rockefeller Center" ></div>

我使用谷歌地图API来地理定位和渲染地图（coffeescript）

# initialize google street view
  init_street_views = () ->
    $(".street_view").each ->
      address = $(@).data('address')
      div = @
      geocoder.geocode { address: address }, (results, status) ->
        if status == 'OK'
          ll = results[0].geometry.location
          svs.getPanorama {
            location: ll
            preference: 'nearest'
          }, (data, status) ->
            pos = data.location.latLng
            head = google.maps.geometry.spherical.computeHeading(pos, ll)
            panorama = new (google.maps.StreetViewPanorama)(div,
            pano: data.location.pano
            pov:
              heading: head
              pitch: 0)
            return
        return

一切都很好：

然而，当我点击全屏按钮而不是占据整个屏幕时，它似乎只占用了一个它的父容器：

我是否需要在父容器中使用css来允许街景窗口小部件占据整个页面？

Answer 1

一个类应该在CSS中声明如下：

.street_view{
background: red;
}

然后你在你的div中使用它：

<div class="street_view">Your content</div>

所以我想你的问题是指你在div中的语法。整个全屏事件从JS开始，但它的样式在CSS类中声明，所以这可能是你的问题：

<div class=\"street_view\"

另一个解决方案可能是只有在为您提供此代码：<div class=\"street_view\"时才检查您的JS代码。

编辑：

我已通过此Google's link

检查了地图所包含的iframe

检查此处的代码并确保您的地图与此类似：

<iframe width="425" height="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://developers.google.com/maps/documentation/javascript/examples/full/streetview-embed" allowfullscreen="">
</iframe>