jquery gmap3 - calculate center point and zoom of multiple dynamically generated marker co-ordinates - google maps api 3

Question

I am basically trying to some how set an auto-zoom and auto-center function for my #map_div div. But because my markers are dynamically generated, I somehow need the zoom and center to work automatically, based on the width and height of my #map_div

But as you can see in my gmap3 script that I am having to determin the zoom and center manually, not cool.

I found this script snippet below, but cant see how to intergrate it with my .gmap3 script. Is it possible to integrate it somehow with my .gmap3 jquery plugin script?

Center point calculation var...

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

Found the above script here

My .gmap3 script below...

jQuery(function($) {    

    $('#map_div').gmap3({
        action: 'init',
        options: {
            center: [50.799019, -1.132037],
            zoom: 5,
            scrollwheel: false
        }
    }, {
        action: 'addMarkers',
        markers: [{
            lat: 50.799019,
            lng: -1.132037,
            data: 'Test One'},
        {
            lat: 50.365162,
            lng: -4.712017,
            data: 'Test Two'},
        {
            lat: 54.518726,
            lng: -5.881054,
            data: 'Test Three'},
        {
            lat: 52.780964,
            lng: -1.211863,
            data: 'Test Four'},
        {
            lat: 51.433998,
            lng: -2.549690,
            data: 'Test Five'
        }],
        marker: {
            options: {
                draggable: false
            }
        }
    });
});

I would normally do a jsfiddle but the site is down.

Any help with this would be so great thanks.

hi Joshc, did you find the way to make it work with gmap3? would you mind to share it? tnx! — delkant, May 17 '15 at 05:10

score 0 · Answer 1 · answered Jul 11 '13 at 15:06

0

Have you try the autofit feature?

http://gmap3.net/en/catalog/16-misc/autofit-58

This function extends map bounds to contain each overlay added (markers, circle ...)

$('#test').gmap3(
  { circle:{
      options: {
        center: [37.772323, -122.214897],
        radius : 2500000,
        fillColor : "#008BB2",
        strokeColor : "#005BB7"
      }
    }
  },
  "autofit"
);

answered Jul 11 '13 at 15:06

zsd

440
5
17

It doesn't adjust the zoom level. From docs: "This function is not and auto-zoom". – brazorf Apr 14 '14 at 14:40

score 0 · Answer 2 · answered May 17 '15 at 06:34

This is how I did it, you can access the coordinates of the markers in the callback of "marker", and use them then to center the map and autozoom it with fitBounds:

$('#map_canvas').gmap3({
map: {
  options: {
    zoom: 9,
    center: [view.lat, view.lng]
  },
   marker : {
      values : markersArray,
      options : {
        draggable : false
      },
  callback:function(m)
     { //m will be the array of markers
       var bounds=new google.maps.LatLngBounds();
       for(var i=0;i<m.length;++i)
       {
         bounds.extend(m[i].getPosition());
       }
       try{
            var map=$(this).gmap3('get');
                map.fitBounds(bounds);
                map.setCenter(bounds.getCenter())
           }catch(e){}
     }
  }
 }
});

jquery gmap3 - calculate center point and zoom of multiple dynamically generated marker co-ordinates - google maps api 3

2 Answers2