Automatic centering of Google maps on points

Question

I have this code:

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

The script displays 2 points on the google map. I have a problem with centering the map on these points. Currently, I enter the coordinates of the centering of the map in the page code, however points on the map are added from the CMS and must center automatically :(

Does anyone know how to do it?

ScaisEdge · Answer 1 · 2018-11-07T19:27:45.570

0

You could use setCenter()

map.setCenter(new google.maps.LatLng(lat, lng));

eg for center on the first marker

map.setCenter(new google.maps.LatLng(locations[0][1], locations[0][2]));

edited Nov 07 '18 at 19:27

answered Nov 07 '18 at 19:07

ScaisEdge

131,976
10
91
107

Can you show me how to use your code on my code? – traffiks Nov 07 '18 at 19:21
answer updated . – ScaisEdge Nov 07 '18 at 19:27
This code centers only on 1 point – traffiks Nov 07 '18 at 19:28
@traffick .. change the center for each point during a loop have not sense .. .. once you have draw you markers the set the center where you prefer .,. the first .. the last or a middle points .. – ScaisEdge Nov 07 '18 at 19:30
can you show me sample? – traffiks Nov 07 '18 at 19:35
simply at the out of the loop add the code in my answer .. – ScaisEdge Nov 07 '18 at 19:35
I tried and centers me on Łódź (one marker). Do you center the map on 2 markers? – traffiks Nov 07 '18 at 19:53

score 0 · Accepted Answer · answered Nov 07 '18 at 19:21

0

Do you need to center on one point? scaisEdge answer will do that for you.

map.setCenter(new google.maps.LatLng(lat, lng));

Else if what you need is to center on the 'center' of those two points. You'll need to calculate the center point between those two and then center on this new LatLong. For that you can check Google Maps Javascript API and this post of stackoverflow: Find center of multiple locations in Google Maps

answered Nov 07 '18 at 19:21

I would like to center on many points (1,2,5,10) – traffiks Nov 07 '18 at 19:26
map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }); map.setCenter(new google.maps.LatLng(lat, lng)); - this is not working – traffiks Nov 07 '18 at 19:28
https://stackoverflow.com/questions/10634199/find-center-of-multiple-locations-in-google-maps – Nov 07 '18 at 19:39

Automatic centering of Google maps on points

2 Answers2