Javascript – Google Maps v3 – limit viewable area and zoom level

google mapsgoogle-maps-api-3javascript

is it possible to limit Google map v3 to a certain area? I want to allow displaying only some area (e.g. a country) and disallow the user to slide elsewhere. Also I want to restrict the zoom level – e.g. only between levels 6 and 9. And I want to use all the base map types.

Is there any way to achieve this?

I had a partial success with limiting zoom level by using StyledMap, but I succeeded only with restricting ROADMAP, I wasn't able to limit zoom on other basic types this way.

Thanks for any help

Best Answer

Better way to restrict zoom level might be to use the minZoom/maxZoom options rather than reacting to events?

var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);

Or the options can be specified during map initialization, e.g.:

var map = new google.maps.Map(document.getElementById('map-canvas'), opt);

See: Google Maps JavaScript API V3 Reference

Related Solutions

Javascript – Google Maps API v3: How to remove all markers

Simply do the following:

I. Declare a global variable:

var markersArray = [];

II. Define a function:

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III. Push markers in the 'markerArray' before calling the following:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. Call the clearOverlays(); or map.clearOverlays(); function wherever required.

That's it!!

Jquery – How to disable mouse scroll wheel scaling with Google Maps API

In version 3 of the Maps API you can simply set the scrollwheel option to false within the MapOptions properties:

options = $.extend({
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

If you were using version 2 of the Maps API you would have had to use the disableScrollWheelZoom() API call as follows:

map.disableScrollWheelZoom();

The scrollwheel zooming is enabled by default in version 3 of the Maps API, but in version 2 it is disabled unless explicitly enabled with the enableScrollWheelZoom() API call.

Best Answer

Related Solutions

Javascript – Google Maps API v3: How to remove all markers

Jquery – How to disable mouse scroll wheel scaling with Google Maps API

Related Topic