Centrowanie mapy Google na wielu markerach

0

Witam.
Mam taki kod:


<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<style>
#map_canvas {
    border:1px solid transparent;
    height: 400px;
    width: 100%;
}
</style>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 padding_all_right_4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding_all_3">
   <h2 class="h2">Atrakcje w okolicy</h2>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
   <a href ="#" class="obj-1" id="obj-1">
      <div class="apartament_atrakcje">Atrakcja 1 pl</div>
   </a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
   <a href ="#" class="obj-2" id="obj-2">
      <div class="apartament_atrakcje">Atrakcja 2 PL</div>
   </a>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding_all_0">
<div class="apartament_mapa">
<div id="map_canvas"></div>
<script>
   var locations = [
                                               ['Atrakcja 1 pl', 51.73925413, 19.51309225, 1],
                                               ['Atrakcja 2 PL', 53.41475000, 14.60220358, 2],
                                           ];
   var map;
   var markers = [];

   function init(){
       map = new google.maps.Map(document.getElementById('map_canvas'), {
           zoom: 10,
           center: new google.maps.LatLng(-33.92, 151.25),
           mapTypeId: google.maps.MapTypeId.ROADMAP
       });

       var num_markers = locations.length;
       for (var i = 0; i < num_markers; i++) {
           markers[i] = new google.maps.Marker({
               position: {lat:locations[i][1], lng:locations[i][2]},
               map: map,
               html: locations[i][0],
               id: i,
           });

           google.maps.event.addListener(markers[i], 'click', function(){
               var infowindow = new google.maps.InfoWindow({
                   id: this.id,
                   content:this.html,
                   position:this.getPosition()
               });
               google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
                   markers[this.id].setVisible(true);
               });
               this.setVisible(false);
               infowindow.open(map);
           });
       }
   }

   init();

</script>

Powyższy kod tworzy mapkę z 2 markerami. Punkty ma mapce pobierane są z CMS. Chciałbym żeby mapka automatycznie centrowała się na wszystkich markerach.

Wie ktoś może jak to zrobić?

0
var bounds = new google.maps.LatLngBounds();
//dodajesz wszystkie markery
bounds.extend(new google.maps.LatLng(1,1));
map.fitBounds(bounds);

1 użytkowników online, w tym zalogowanych: 0, gości: 1