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

vsync · Accepted Answer · 2016-04-03T08:24:52.120

128

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

edited Apr 03 '16 at 08:24

answered May 12 '10 at 13:07

vsync

118,978
58
307
400

this centers the map on one point i want to center the map on all shown points – meo May 12 '10 at 13:10
9

try this! http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/ – vsync May 12 '10 at 13:13
it worked i had to use LatLngBounds just like your example. I passed my array directly to `fitBounds()`. Thx for you fast support – meo May 12 '10 at 13:22
2

What kind of array is `latlng`? How did it get that `each` function? JQuery? – Protector one Jul 10 '15 at 10:16
1

@Protectorone - i've answered this years ago and don't really remember, but I have tried to figure it out and had updated the answer with additional data. – vsync Apr 03 '16 at 08:29

score 18 · Answer 2 · edited Mar 15 '16 at 18:40

18

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

edited Mar 15 '16 at 18:40

neiker

8,887
4
29
32

answered Oct 23 '14 at 15:16

Paweł Rychlik

677
7
12

score 2 · Answer 3 · edited Jan 16 '14 at 14:00

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 < latlng_pos.length; i++ ) {
            latlngbounds.extend( latlng_pos[ i ] );
        }
        map.fitBounds( latlngbounds );



    });

score 0 · Answer 4 · edited Apr 13 '18 at 06:11

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 < latlng_points_array.length; i++ ) {
        latlngbounds.extend( latlng_points_array[i] );
    }

map.fitBounds( latlngbounds );

Google MAP API v3: Center & Zoom on displayed markers

4 Answers4

Linked

Related