KTB
KTB

Reputation: 1529

Google Map : Avoid showing the sea

I'm trying to figure out a way to limit the dragging option of the google maps, such that:

My requirement is despite of what zoom level the user is in, he should not be able to drag the map to have the sea view. that is only the land should be shown, if trying to go into the sea, should be restricted(prevented from dragging).

I've defined boundaries to restrict the map view successfully. but the problem is at higher zooming levels, user can drag the map, still within the boundaries, but shows only the sea, which i want to prevent.

But still i couldn't figure out a way to do the task. Can anyone please suggest a method/mechanism please?

thank you...

Upvotes: 1

Views: 447

Answers (3)

krikara
krikara

Reputation: 2435

I am a tad bit confused about your question.

You say

" at higher zooming levels, user can drag the map in a way that only the sea is in the view"

and then you say

"despite of what zoom level the user is in, he should not be able to drag the map to have the sea view"

Anyways, I have a solution where you can make the map not draggable, and then upon a zoom, you can change that value.

For example:

function intialize{

    map = new google.maps.Map(document.getElementById("map_canvas");
    map.setOptions({ draggable : true });

}

google.maps.event.addListener(map,'zoom_changed',function () { 
  if (map.getZoom() >= 4) {
   map.setOptions({ draggable : false});
  }
});

Edit: I think I am starting to understand what you are saying though. I believe what you want is to allow users to zoom in and explore a country, but not to drag the map onto the water. And if you zoom out, you can't drag anymore. I'm not quite sure if you can implement this entirely, but you can definitely determine whether or not the map is draggable based on the zoom level.

Upvotes: 1

duncan
duncan

Reputation: 31922

This at first seems very hard. And what would you do if there was a tiny bit of land visible, is that ok?

However you could just prevent the user from dragging the map. Set draggable:false in your MapOptions.

Upvotes: 1

Jay Thakkar
Jay Thakkar

Reputation: 743

Hello I Have looked over this example so i suggest you to look over it once if you could find some solution. MapView Example

Another Example I Refered is this

Upvotes: 0

Related Questions