Unable to set center of map in bootstrap vertical tabs

Question

I have used GEM Named: gmaps4rails which is doing perfect job somehow but the problem is that I am unable to center my map. Its showing in very corner.

What I want to do is, show the map having MASSACHUSETTS as center having number of pins in it.

I am also using Tabs in which they are loading now but unable to figured it out how I can adjust to set it center with MASSACHUSETTS.

Here is my code:

<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>

And Div:

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

Here is sample pic:

Here is the demo:

  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

I don't know why you use Gmaps if you use the map API.
Try with just this:

EDITED to add a loop that creates markers from an array (and slight changes).

<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>

Notice that I use your API key followed by a callback.
This callback must be the name of your map creation function.

From my first answer, I changed:
The zoom from 14 to 9, Which is better to view all Massachusetts.
You may prefer 8... (Lower number is higher altitude)
The map type to ROADMAP which I think is best for bar locations.
Map type options are: ROADMAP, TERRAIN, SATELLITE and HYBRYD
And I slightly changed the «center of Massachusetts» coord because the islands where off my screen.

You mentionned, in comments, that you have the coords in database...
So make your PHP produce this coord_List array.
;)

Also... This is needed in <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

Since your produced coords are like this:

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

You have to remove those ".
Add this loop before the one that sets markers:

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

The rest remains unchanged.