Google MAP API v3 Center Zoom on displayed markers

Question

I use the following code to set markers on my map     var latLngs          each locations markers  function i  m      var myLatLng   new google maps LatLng m latitude  m longitude      latLngs i    myLatLng                                              var marker   new google maps Marker       position  myLatLng      map  map      shadow  shadow      icon  image      shape  shape      title  m city      zIndex  i                The markers show up on my map  Now I would like to center  amp  zoom the map on these markers  How can I accomplish this  I have tried   map fitBounds getBoundsForLatLngs latLngs      The console log of latLngs gives out      46 793182  7 146903    b 46 793182   more       46 8077779  7 1709386    b 46 8077779   more        But it doesn t seem to work  and I get no error in the console  What am I doing wrong

User · Answer

for center and auto zoom on display markers      map  an instance of google maps Map object     latlng points array  an array of google maps LatLng objects  var latlngbounds   new google maps LatLngBounds          for   var i   0  i  lt  latlng points array length  i               latlngbounds extend  latlng points array i            map fitBounds  latlngbounds

User · Answer

In case you prefer more functional style      map - instance of google Map v3    markers - array of Markers var bounds   markers reduce function bounds  marker        return bounds extend marker getPosition        new google maps LatLngBounds      map setCenter bounds getCenter     map fitBounds bounds

User · Answer

I ve also find this fix that zooms to fit all markers  LatLngList  an array of instances of latLng  for example       map  is an instance of GMap3  var LatLngList                          new google maps LatLng  52 537 -2 061                         new google maps LatLng  52 564 -2 017                          latlngbounds   new google maps LatLngBounds     LatLngList forEach function latLng      latlngbounds extend latLng           or with ES6     for  var latLng of LatLngList        latlngbounds extend latLng    map setCenter latlngbounds getCenter     map fitBounds latlngbounds

User · Answer

Try this function    it works       function             var myOptions                 zoom  10              center  latlng              mapTypeId  google maps MapTypeId ROADMAP                    var map   new google maps Map document getElementById  map canvas   myOptions           var latlng pos             var j 0               property item   each function                latlng pos j  new google maps LatLng   this  find   latitude   val     this  find   longitude   val                 j                var marker   new google maps Marker                   position  new google maps LatLng   this  find   latitude   val     this  find   longitude   val                        position  new google maps LatLng -35 397  150 640                   map  map                                                 map  an instance of google maps Map object            latlng  an array of google maps LatLng objects         var latlngbounds   new google maps LatLngBounds             for   var i   0  i  lt  latlng pos length  i                   latlngbounds extend  latlng pos  i                        map fitBounds  latlngbounds

[javascript] Google MAP API v3: Center & Zoom on displayed markers

Examples related to javascript

Examples related to jquery

Examples related to google-maps-api-3