Auto-center map with multiple markers in Google Maps API v3

Question

This is what I use to display a map with 3 pins markers    lt script gt    function initialize         var locations             DESCRIPTION   41 926979  12 517385  3           DESCRIPTION   41 914873  12 506486  2           DESCRIPTION   41 918574  12 507201  1              var map   new google maps Map document getElementById  map            zoom  15        center  new google maps LatLng 41 923  12 513         mapTypeId  google maps MapTypeId ROADMAP              var infowindow   new google maps InfoWindow         var marker  i       for  i   0  i  lt  locations length  i            marker   new google maps Marker           position  new google maps LatLng locations i  1   locations i  2            map  map                  google maps event addListener marker   click    function marker  i            return function               infowindow setContent locations i  0              infowindow open map  marker                      marker  i                 function loadScript         var script   document createElement  script        script type    text javascript       script src    https   maps googleapis com maps api js v 3 exp amp sensor false amp      callback initialize       document body appendChild script          window onload   loadScript   lt  script gt    lt div id  map  style  width  900px  height  700px   gt  lt  div gt    What I   m looking for is a way to avoid having to    manually    find the center of the map with center  new google maps LatLng 41 923  12 513   Is there a way to automatically have the map centered on the three coordinates

User · Answer

I use the method above to set the map boundaries, then, instead of resetting the zoom level, I just calculate the average LAT and average LON and set the center point to that location. I add up all the lat values into latTotal and all the lon values into lontotal and then divide by the number of markers. I then set the map center point to those average values.

latCenter = latTotal / markercount; lonCenter = lontotal / markercount;

User · Answer

I ve tryied all answers of this topic  but just this below worked fine on my project  Angular 7 and AGM Core 1 0 0-beta 7  lt agm-map  latitude   quot lat quot   longitude   quot long quot   zoom   quot zoom quot   fitBounds   quot true quot  gt     lt agm-marker latitude  quot   localizacao latitude   quot  longitude  quot   localizacao longitude   quot   agmFitBounds   quot true quot       ngFor  quot let localizacao of localizacoesTec quot  gt     lt  agm-marker gt   lt  agm-map gt   The properties  agmFitBounds   quot true quot  at agm-marker and  fitBounds   quot true quot  at agm-map does the job

User · Answer

Here s my take on this in case anyone comes across this thread   This helps protect against non-numerical data destroying either of your final variables that determine lat and lng   It works by taking in all of your coordinates  parsing them into separate lat and lng elements of an array  then determining the average of each   That average should be the center  and has proven true in my test cases    var coords    50 0160001 3 2840073 50 014458 3 2778274 50 0169713 3 2750587 50 0180745 3 276742 50 0204038 3 2733474 50 0217796 3 2781737 50 0293064 3 2712542 50 0319918 3 2580816 50 0243287 3 2582281 50 0281447 3 2451177 50 0307925 3 2443178 50 0278165 3 2343882 50 0326574 3 2289809 50 0288569 3 2237612 50 0260081 3 2230589 50 0269495 3 2210104 50 0212645 3 2133541 50 0165868 3 1977592 50 0150515 3 1977341 50 0147901 3 1965286 50 0171915 3 1961636 50 0130074 3 1845098 50 0113267 3 1729483 50 0177206 3 1705726 50 0210692 3 1670394 50 0182166 3 158297 50 0207314 3 150927 50 0179787 3 1485753 50 0184944 3 1470782 50 0273077 3 149845 50 024227 3 1340514 50 0244172 3 1236235 50 0270676 3 1244474 50 0260853 3 1184879 50 0344525 3 113806    var filteredtextCoordinatesArray   coords split                centerLatArray           centerLngArray             for  i 0   i  lt  filteredtextCoordinatesArray length   i             var centerCoords   filteredtextCoordinatesArray i          var centerCoordsArray   centerCoords split              if  isNaN Number centerCoordsArray 0                     else           centerLatArray push Number centerCoordsArray 0                    if  isNaN Number centerCoordsArray 1               else           centerLngArray push Number centerCoordsArray 1                                             var centerLatSum   centerLatArray reduce function a  b    return a   b          var centerLngSum   centerLngArray reduce function a  b    return a   b           var centerLat   centerLatSum   filteredtextCoordinatesArray length        var centerLng   centerLngSum   filteredtextCoordinatesArray length                                            console log centerLat       console log centerLng        var mapOpt               zoom 8      center   lat  centerLat  lng  centerLng

User · Answer

I think you have to calculate latitudine min and longitude min  Here is an Example with the function to use to center your point     Example values of min  amp  max latlng values var lat min   1 3049337  var lat max   1 3053515  var lng min   103 2103116  var lng max   103 8400188   map setCenter new google maps LatLng      lat max   lat min    2 0       lng max   lng min    2 0      map fitBounds new google maps LatLngBounds      bottom left   new google maps LatLng lat min  lng min       top right   new google maps LatLng lat max  lng max

User · Answer

i had a situation where i can t change old code  so added this javascript function to calculate center point and zoom level    x000D   x000D    input x000D  var tempdata     18 9400 72 8200-19 1717 72 9560-28 6139 77 2090    x000D   x000D  function getCenterPosition tempdata   x000D   var tempLat   tempdata 0  split  -    x000D   var latitudearray       x000D   var longitudearray       x000D   var i  x000D   for i 0  i lt tempLat length i     x000D    var coordinates   tempLat i  split       x000D    latitudearray push coordinates 0    x000D    longitudearray push coordinates 1    x000D     x000D   latitudearray sort function  a  b    return a-b      x000D   longitudearray sort function  a  b    return a-b      x000D   var latdifferenece   latitudearray latitudearray length-1  - latitudearray 0   x000D   var temp    latdifferenece   2  toFixed 4    x000D   var latitudeMid   parseFloat latitudearray 0     parseFloat temp   x000D   var longidifferenece   longitudearray longitudearray length-1  - longitudearray 0   x000D   temp    longidifferenece   2  toFixed 4    x000D   var longitudeMid   parseFloat longitudearray 0     parseFloat temp   x000D   var maxdifference    latdifferenece  gt  longidifferenece   latdifferenece   longidifferenece  x000D   var zoomvalue   x000D   if maxdifference  gt   0  amp  amp  maxdifference  lt   0 0037     zoom 17 x000D    zoomvalue  17   x000D   else if maxdifference  gt  0 0037  amp  amp  maxdifference  lt   0 0070     zoom 16 x000D    zoomvalue  16   x000D   else if maxdifference  gt  0 0070  amp  amp  maxdifference  lt   0 0130     zoom 15 x000D    zoomvalue  15   x000D   else if maxdifference  gt  0 0130  amp  amp  maxdifference  lt   0 0290     zoom 14 x000D    zoomvalue  14   x000D   else if maxdifference  gt  0 0290  amp  amp  maxdifference  lt   0 0550     zoom 13 x000D    zoomvalue  13   x000D   else if maxdifference  gt  0 0550  amp  amp  maxdifference  lt   0 1200     zoom 12 x000D    zoomvalue  12   x000D   else if maxdifference  gt  0 1200  amp  amp  maxdifference  lt   0 4640     zoom 10 x000D    zoomvalue  10   x000D   else if maxdifference  gt  0 4640  amp  amp  maxdifference  lt   1 8580     zoom 8 x000D    zoomvalue  8   x000D   else if maxdifference  gt  1 8580  amp  amp  maxdifference  lt   3 5310     zoom 7 x000D    zoomvalue  7   x000D   else if maxdifference  gt  3 5310  amp  amp  maxdifference  lt   7 3367     zoom 6 x000D    zoomvalue  6   x000D   else if maxdifference  gt  7 3367  amp  amp  maxdifference  lt   14 222     zoom 5 x000D    zoomvalue  5   x000D   else if maxdifference  gt  14 222  amp  amp  maxdifference  lt   28 000     zoom 4 x000D    zoomvalue  4   x000D   else if maxdifference  gt  28 000  amp  amp  maxdifference  lt   58 000     zoom 3 x000D    zoomvalue  3   x000D   else x000D    zoomvalue  1   x000D   return latitudeMid     longitudeMid     zoomvalue  x000D    x000D   x000D   x000D

User · Answer

This work for me in Angular 9    import  GoogleMap  GoogleMapsModule  from  quot  angular google-maps quot      ViewChild  Map   Map  GoogleMap     Element Map       locations          lat  7 423568  lng  80 462287         lat  7 532321  lng  81 021187         lat  6 117010  lng  80 126269           constructor        var bounds   new google maps LatLngBounds        setTimeout      gt         for  let u in this locations          var marker   new google maps Marker          position  new google maps LatLng this locations u  lat          this locations u  lng                   bounds extend marker getPosition                  this Map fitBounds bounds         200       And it automatically centers the map according to the indicated positions  Result

User · Answer

There s an easier way  by extending an empty LatLngBounds rather than creating one explicitly from two points   See this question for more details   Should look something like this  added to your code     create empty LatLngBounds object var bounds   new google maps LatLngBounds    var infowindow   new google maps InfoWindow         for  i   0  i  lt  locations length  i          var marker   new google maps Marker       position  new google maps LatLng locations i  1   locations i  2        map  map            extend the bounds to include each marker s position   bounds extend marker position      google maps event addListener marker   click    function marker  i        return function           infowindow setContent locations i  0          infowindow open map  marker              marker  i         now fit the map to the newly inclusive bounds map fitBounds bounds       optional  restore the zoom level after the map is done scaling var listener   google maps event addListener map   idle   function          map setZoom 3       google maps event removeListener listener         This way  you can use an arbitrary number of points  and don t need to know the order beforehand   Demo jsFiddle here  http   jsfiddle net x5R63

User · Answer

To find the exact center of the map you ll need to translate the lat lon coordinates into pixel coordinates and then find the pixel center and convert that back into lat lon coordinates   You might not notice or mind the drift depending how far north or south of the equator you are  You can see the drift by doing map setCenter map getBounds   getCenter    inside of a setInterval  the drift will slowly disappear as it approaches the equator   You can use the following to translate between lat lon and pixel coordinates  The pixel coordinates are based on a plane of the entire world fully zoomed in  but you can then find the center of that and switch it back into lat lon      var HALF WORLD CIRCUMFERENCE   268435456     in pixels at zoom level 21    var WORLD RADIUS   HALF WORLD CIRCUMFERENCE   Math PI      function  latToY   lat           var sinLat   Math sin   toRadians  lat            return HALF WORLD CIRCUMFERENCE - WORLD RADIUS   Math log    1   sinLat       1 - sinLat       2           function  lonToX   lon           return HALF WORLD CIRCUMFERENCE   WORLD RADIUS    toRadians  lon             function  xToLon   x           return  toDegrees    x - HALF WORLD CIRCUMFERENCE     WORLD RADIUS             function  yToLat   y           return  toDegrees  Math PI   2 - 2   Math atan  Math exp    y - HALF WORLD CIRCUMFERENCE     WORLD RADIUS                 function  toRadians   degrees           return degrees   Math PI   180           function  toDegrees   radians           return radians   180   Math PI

[javascript] Auto-center map with multiple markers in Google Maps API v3

Examples related to javascript

Examples related to google-maps

Examples related to google-maps-api-3

Examples related to google-maps-markers