无法在 bootstrap 个垂直选项卡中设置地图中心

Question

我已经使用了 GEM Named: gmaps4rails 它在某种程度上做得很好，但问题是我无法将我的地图居中。它出现在角落里。

我想做的是，显示以 MASSACHUSETTS 为中心的地图，其中包含引脚数。

我也在使用正在加载的选项卡，但无法弄清楚如何调整以将其设置为与 MASSACHUSETTS 居中。

这是我的代码：

<script src="https://maps.googleapis.com/maps/api/js?key=KEYGOESHERE" type="text/javascript"></script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>
<script>
  $(document).ready(function () {
    var map_center = new google.maps.LatLng('42.0574342', '-72.8422761');
    var handler = Gmaps.build('Google');
    handler.buildMap({
          provider: {
            disableDefaultUI: true,
            zoomControl: true,
            zoom: 12,
            center: map_center
          },
          internal: {
            id: 'map'
          }
        },
        function () {
          var markers = handler.addMarkers(<%=raw @retailers.to_json %>);
          handler.bounds.extendWith(markers);
          handler.fitMapToBounds();
        }
    );
    $('.nav-tabs').on('shown.bs.tab', function () {
      google.maps.event.trigger(window, 'resize', {});
      var reCenter = new google.maps.LatLng('42.0574342', '-72.8422761');
      handler.setCenter(reCenter);
    });
  });
</script>

和Div：

<div style='width: 825px; height: 350px;'>
<div id="map" style='width: 825px; height: 350px;'></div>
</div>

这是示例图片：

这是演示：

  var map_center = new google.maps.LatLng(42.0574342, -72.8422761);
  var handler = Gmaps.build('Google');
  handler.buildMap({
      provider: {
        disableDefaultUI: true,
        zoomControl: true,
        zoom: 12,
        center: map_center
      },
      internal: {
        id: 'map'
      }
    },
    function() {
      var markers = handler.addMarkers([{
        "lat": "42.3420564",
        "lng": "-71.1377384",
        "marker_title": "BRIX Wine Shop"
      }, {
        "lat": "42.3484068",
        "lng": "-71.1563419",
        "marker_title": "Bauer Wine \u0026 Spirits"
      }, {
        "lat": "42.3560102",
        "lng": "-71.1275915",
        "marker_title": "Boston Wine Exchange"
      }, {
        "lat": "42.3484068",
        "lng": "-71.1563419",
        "marker_title": "Bauer Wine \u0026 Spirits"
      }]);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
    }
  );
  $('.nav-tabs').on('shown.bs.tab', function() {
    google.maps.event.trigger(window, 'resize', {});
    var reCenter = new google.maps.LatLng(42.0574342, -72.8422761);
    handler.setCenter(reCenter);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVGMRkZg8rFSxoUspEiZmnaMRqT3WO8wU" type="text/javascript"></script>

<script src="https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js"></script>



<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>




<div style='width: 825px; height: 350px;'>
                        <div id="map" style='width: 825px; height: 350px;'></div>
                      </div>

Answer 1

不知道你用地图API干嘛用Gmaps。
试试这个：

EDITED 以添加一个从数组创建标记的循环（并稍作更改）。

<div id="map"></div>

<script>
var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 9,
        center: {lat:42.25, lng: -71.80},   // Center of Massachusetts
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var coord_List = [
        {lat: 42.0574342, lng: -72.8422761},    // Your coords // A

        // Other coords just for the example.
        {lat:42.40115038362434, lng: -72.18292236328125},   // B    
        {lat:42.52474804234817, lng: -73.0535888671875},    // C    
        {lat:42.55914981211588, lng: -71.2957763671875},    // D
        {lat:42.116561350389006, lng: -71.4495849609375},   // E
        {lat:41.95949009892467, lng: -70.02410888671875}    // F
    ];

    // Marker letters
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var labelIndex = 0;

    for(i=0;i<coord_List.length;i++){
        new google.maps.Marker({
            position: coord_List[i],
            label: labels[labelIndex++ % labels.length],
            map: map
        });
    }
}
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVGMRkZg8rFSxoUspEiZmnaMRqT3WO8wU&callback=initMap"></script>

注意我使用你的API键后跟一个回调。
此回调必须是您的地图创建函数的名称。

从我第一个回答开始，我改成：
zoom从14到9，哪个更好看全马萨诸塞州
您可能更喜欢 8...（数字越小海拔越高）
我认为最适合酒吧位置的 ROADMAP 地图类型。
地图类型选项有：ROADMAP、TERRAIN、SATELLITE 和 HYBRYD
我稍微更改了“马萨诸塞州的中心”坐标，因为岛屿在我的屏幕之外。

您在评论中提到您在数据库中有坐标...
所以让你的 PHP 产生这个 coord_List 数组。
;)

另外...<head>需要这个：

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">

<style>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 100%;
    cursor: pointer !important;
}
</style>

--------------
错误修复

因为你生成的坐标是这样的：

[
    {"lat":"42.0574342","lng":"-72.8422761"},    // Your coords // A

    // Other coords just for the example.
    {"lat":"42.40115038362434","lng":"-72.18292236328125"}, // B    
    {"lat":"42.52474804234817","lng":"-73.0535888671875"},  // C    
    {"lat":"42.55914981211588","lng":"-71.2957763671875"},  // D
    {"lat":"42.116561350389006","lng":"-71.4495849609375"}, // E
    {"lat":"41.95949009892467","lng":"-70.02410888671875"}  // F
]

你必须删除那些 "。
在设置标记的循环之前添加此循环：

for(i=0;i<coord_List.length;i++){
    coord_List[i].toString().replace(/\"/g, "");
    coord_List[i].lat = parseFloat(coord_List[i].lat);
    coord_List[i].lng = parseFloat(coord_List[i].lng);
    console.log(coord_List[i]);
}

其余不变

无法在 bootstrap 个垂直选项卡中设置地图中心

Unable to set center of map in bootstrap vertical tabs

jquery

google-maps-api-3

google-maps-markers

gmaps4rails