Невозможно установить центр карты в бутстрап вертикальные вкладки

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

Я не знаю, почему вы используете Gmaps, если вы используете карту API.
Try только с этим:

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> 

-------------
BUG FIX

Поскольку ваши производства подобны координатам это:

[ 
    {"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]); 
} 

Остальное остается без изменений.