如何在Gmaps4rails中居中标记

Question

看完这个答案后 ，我仍然无法将标记显示在页面中央。

我的代码如下;

在视图中

<div class="Flexible-container">
<!--Google Maps Div-->
          <div id="map" style='width: 425; height: 425px;' frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></div>
</div>
          <!-- End of Responsive iFrame -->
          <script type="text/javascript">
          handler = Gmaps.build('Google');
          handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
            markers = handler.addMarkers(<%=raw @hash.to_json %>);
            handler.map.centerOn(markers[0]);
            handler.bounds.extendWith(markers);
            handler.fitMapToBounds();
            handler.map.serviceObject.setZoom(16);
          });
          </script>

在控制器中

def edit
    @user = current_user
    @hash = Gmaps4rails.build_markers(@user) do |u, marker|
  marker.lat u.latitude
  marker.lng u.longitude
  marker.infowindow u.name
  end
end

CSS

/* Flexible iFrame */

.Flexible-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

目前，页面上的标记位于容器div的角落。 我该怎么做才能让标记显示在中心？ 有没有办法在视图中改进我的地图div？

谢谢！

Answer 1

你必须知道你想要什么：

// to center on a marker
handler.map.centerOn(markers[0]); 
// to set the map zoom
handler.getMap().setZoom(16);


// to center the map AND adjust zoom to see ALL markers
handler.bounds.extendWith(markers);
handler.fitMapToBounds();

所以保持你喜欢的代码，但不要混淆，简单