GMaps centering not working

Question

I'm working on an app with few points of coordinates but I can't get the center points. Can anyone help? this is my code:

<div id="mymap"></div>



 <script type="text/javascript">
       function initMap() {
    var locations = <?php print_r(json_encode($hospitalmap)) ?>;




    var mymap = new GMaps({
      el: '#mymap',
      lat: mymap.getCenter().lat(),
      lng: mymap.getCenter().lng(),
      zoom:13
    });
    //gMap.setCenter(new google.maps.LatLng(-6.2598513, 106.6160752));

    $.each( locations, function( index, value ){
        mymap.addMarker({
          lat: value.HospitalLatitude,
          lng: value.HospitalLongitude,
          title: value.HospitalName,
          click: function(e) {
            alert('This is '+value.HospitalName+'.');
          }
        });
   });

  }

  </script>

PS it works if i sent the center manually

EDIT: I tried to change it with rohit's guide to this

    var bounds = new google.maps.LatLngBounds();

    var mymap = new GMaps({
      el: '#mymap',

      zoom:13
    });


    $.each( locations, function( index, value ){
        mymap.addMarker({
          lat: value.HospitalLatitude,
          lng: value.HospitalLongitude,
          title: value.HospitalName,
          click: function(e) {
            alert('This is '+value.HospitalName+'.');
          }
        });
        bounds.extend(marker.position);
   }

   );map.fitBounds(bounds);

  }

  </script>

still not working at the moment. Please help!

Heres the data sample:

var locations = [
{"HospitalID":2,"HospitalName":"RS Bethsaida","HospitalDesc":"","HospitalClass":"A","HospitalAddress":"Curug Sangereng, Kelapa Dua, Tangerang, Banten","HospitalPhone":"02183929302","HospitalEmail":"bethsaida@gmail.com","HospitalLatitude":"-6.254463","HospitalLongitude":"106.622776","Balance":"5250007","Active":"1","LoginMethod":null,"AcceptedBy":null,"AcceptedDate":null,"CreatedBy":"5","CreatedDate":"2017-08-01 00:00:00","ModifiedBy":"5","ModifiedDate":"2017-08-03 00:00:00"},
{"HospitalID":3,"HospitalName":"RS Mayapada","HospitalDesc":"","HospitalClass":"A","HospitalAddress":"Modernland, Jl. Honoris Raya Kav. 6, Kelapa Indah, Klp. Indah, Kec. Tangerang, Kota Tangerang, Banten","HospitalPhone":"02100001920","HospitalEmail":"rs@mayapada.com","HospitalLatitude":"-6.204981","HospitalLongitude":"106.641538","Balance":"0","Active":"1","LoginMethod":null,"AcceptedBy":null,"AcceptedDate":null,"CreatedBy":"5","CreatedDate":"2017-08-01 00:00:00","ModifiedBy":"5","ModifiedDate":"2017-08-03 00:00:00"}];

Answer 1

Now the below is a working sample, you can replace the locations by your PHP code, and hope this works well.

<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="https://maps.google.com/maps/api/js?key=AIzaSyD95RyzZ5IEngrkYckzqRMAwyCZ7-eezMw"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js"></script>
<div id="map">dfas</div>
<style>
 #map {

        width: 98%;
        height: 600px;
        margin-bottom:50px;
        margin-left:15px;
    }
</style>
<script type='text/javascript'>

function initMap() {
var locations = [
{"HospitalID":2,"HospitalName":"RS Bethsaida","HospitalDesc":"","HospitalClass":"A","HospitalAddress":"Curug Sangereng, Kelapa Dua, Tangerang, Banten","HospitalPhone":"02183929302","HospitalEmail":"bethsaida@gmail.com","HospitalLatitude":"-6.254463","HospitalLongitude":"106.622776","Balance":"5250007","Active":"1","LoginMethod":null,"AcceptedBy":null,"AcceptedDate":null,"CreatedBy":"5","CreatedDate":"2017-08-01 00:00:00","ModifiedBy":"5","ModifiedDate":"2017-08-03 00:00:00"},
{"HospitalID":3,"HospitalName":"RS Mayapada","HospitalDesc":"","HospitalClass":"A","HospitalAddress":"Modernland, Jl. Honoris Raya Kav. 6, Kelapa Indah, Klp. Indah, Kec. Tangerang, Kota Tangerang, Banten","HospitalPhone":"02100001920","HospitalEmail":"rs@mayapada.com","HospitalLatitude":"-6.204981","HospitalLongitude":"106.641538","Balance":"0","Active":"1","LoginMethod":null,"AcceptedBy":null,"AcceptedDate":null,"CreatedBy":"5","CreatedDate":"2017-08-01 00:00:00","ModifiedBy":"5","ModifiedDate":"2017-08-03 00:00:00"}];
var map;
var bounds = new google.maps.LatLngBounds();
 map = new GMaps({
    el: '#map',
    lat: -6.254463,
    lng: 106.622776
  });

  $.each( locations, function( index, value ){
    map.addMarker({
      lat: parseFloat(value.HospitalLatitude),
      lng: parseFloat(value.HospitalLongitude),
      title: value.HospitalName,
      click: function(e) {
        alert('This is '+value.HospitalName+'.');
      }
    });
  bounds.extend({lat: parseFloat(value.HospitalLatitude), lng: parseFloat(value.HospitalLongitude)});

  });
    map.fitBounds(bounds);
}
initMap();
</script>

Thanks