Javascript – Google Maps API v3: lock area from dragging

drag, google-maps-api-3, javascript

I'm looking for a way to border the area (in my case: The Netherlands) in the Google Maps API v3 and stop the user from dragging the map outside of the border. The option I think I need is drag(+)(end,ging etc.) described at the following link: . Found alot of examples already but they don't seem to fit in my code. Here is the javascript part of the API:

function initialize() {var mapOptions = {zoom: 1,                                                //zoomValue                                                 minZoom: 7,                                             //minimumValue zoom    center: new google.maps.LatLng(52.088282, 5.477124),    //position center map (geoLocation)mapTypeControl: true,                                   //mapType (cart/satelite)mapTypeControlOptions: {    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,    position: google.maps.ControlPosition.TOP_CENTER},panControl: false,                                      //panControl (moveLeft/moveUp/moveRight/moveDown)panControlOptions: {    position: google.maps.ControlPosition.TOP_RIGHT},zoomControl: true,                                      //zoomControl (zoomIn/zoomOut)zoomControlOptions: {    style: google.maps.ZoomControlStyle.LARGE,    position: google.maps.ControlPosition.TOP_LEFT},scaleControl: true,                                     //scaleControlstreetViewControl: true,streetViewControlOptions: {    position: google.maps.ControlPosition.TOP_LEFT    }}var map = new google.maps.Map(document.getElementById('map-canvas'),                            mapOptions);}google.maps.event.addDomListener(window, 'load', initialize);

Best Solution

you just need to add

draggable: false

in the options list