无法在引导垂直选项卡中设置地图中心

Question

我使用了名为：gmaps4rails 的 GEM，它在某种程度上做得很完美，但问题是我无法将我的地图居中。它显示在非常角落。

我想要做的是，显示以马萨诸塞州为中心的地图，其中包含许多别针。

我也在使用它们现在正在加载的选项卡，但无法弄清楚如何调整以将其设置为 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 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
我稍微改变了“马萨诸塞州中心”的坐标，因为这些岛屿不在我的屏幕上。

您在 cmets 中提到您在数据库中有坐标...
所以让你的 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]);
}

其余部分保持不变。