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

I suppose fitbounds can server your purpose check this https://stackoverflow.com/questions/10268033/google-maps-api-v3-method-fitbounds and for the documentation refer https://developers.google.com/maps/documentation/javascript/reference — Rohit Ailani, Sep 19 '17 at 05:18
thanks for the reply @RohitAilani but can you give me a sample code based on my code? thanks! — Cookie, Sep 19 '17 at 05:21

Rohit Ailani · Answer 1 · 2017-09-20T06:35:31.943

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

this one still doesnt work, but I reposted the fiddle to try :) thanks again for the reply — Cookie, Sep 19 '17 at 05:38
your fiddle doesn't seems to work. Please load all the required js as well. I tried but it is showing me missing API_KEY. Please make it functional then we will move to setcenter. Even there is PHP code there. — Rohit Ailani, Sep 19 '17 at 08:57
; its all i have for my JS, im using Gmaps https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js @rohit — Cookie, Sep 20 '17 at 04:32
@Cookie I have modified my answer and this is a working example now. Please check and let me know if anything else required. Thanks — Rohit Ailani, Sep 20 '17 at 06:36
1 more thing if you are using php code don't use print_r use echo instead. Thanks again. Hope this helps !! — Rohit Ailani, Sep 20 '17 at 07:17
it didnt work :( but i changed my midpoint according to the geo location instead.. thank you so much for your help i really appreciate it! @rohit — Cookie, Sep 20 '17 at 08:08

GMaps centering not working

1 Answers1