Setting a max zoom level using jquery gmap3 & autoFit

Question

I am using 'autoFit' on the gmap3 plugin so it zooms to the best level for the objects on the map. The problem is when there is only 1 object it zooms in to the maximum level which is too far. How can i make it go no futher than zoom level 14?

Thanks.

http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions — Val, Aug 15 '11 at 14:25
probably something like `map.maxZoom = 14` or `map.maxZoom(14)` — Val, Aug 15 '11 at 14:26

score 7 · Accepted Answer · answered Oct 04 '11 at 10:07

You can use maxZoom, but that sets the max zoom of the map and not of the autofit function. That means that the user will not be able to zoom further in on the map if they would want to.

map:{
      center: true,
      zoom: 10,
      maxZoom: 18
    }

Instead I added a hidden circle or radius to every point with a size that would make the map zoom out to the zoom level I would want it to be. This way the user can still zoom further in if they would want to.

$('#test').gmap3(
    { 
        action: 'addMarker',
        latLng: "your data input for markers",
        map:{
            center: true,
            zoom: 10
        }
    },
    { 
        action: 'addCircle',
        latLng: "your data input for markers",
        options: {
            radius : 75,
            strokeOpacity: 0,
            fillOpacity: 0,
        }
    },
    'autofit'
);

score 4 · Answer 2 · answered Aug 15 '11 at 14:53

You can add the maxzoom property to the map property of the gmap3 plugin:

$('#test1').gmap3(
      {
        action: 'addInfoWindow',
        address: "some place name",
        map:{
          center: true,
          zoom: 5,
          maxZoom: 10
        },...

score 3 · Answer 3 · answered Jul 05 '13 at 18:48

This seems to work for me in the gmap3 version 5.1.1. Just use autofit:{maxZoom:14}. This tells the map to only zoom into level 14 on autofit and allows the user to zoom in or out with their mouse or the zoom control.

    $(function(){

    $("#test").gmap3();

    $('#test-ok').click(function(){
      var addr = $('#test-address').val();
      if ( !addr || !addr.length ) return;
      $("#test").gmap3({
        getlatlng:{
          address:  addr,
          callback: function(results){
            if ( !results ) return;
            $(this).gmap3({
              marker:{

                latLng:results[0].geometry.location,
                map:{

                  center: true,

                },

              },
              autofit:{maxZoom: 14},

            });

          }
        }
      });
    });

    $('#test-address').keypress(function(e){
      if (e.keyCode == 13){
        $('#test-ok').click();
      }
    });
  });

Thank you very much for this answer! And it's pretty sad this is not mentioned in [gmap3 documentation for autofit](http://gmap3.net/en/catalog/16-misc/autofit-58) :( — khustochka, Dec 18 '13 at 15:33
You are very welcome! Yes, I agree that gmap3's documentation is very vague and it usually requires the user to do a lot more trial and error than most Plugins. — ryan, Jan 17 '14 at 19:48

Setting a max zoom level using jquery gmap3 & autoFit

3 Answers3

Linked