CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Alex Smith
Alex Smith

Reputation: 85

Crop part of map using Google Maps API v3

How can I set bounds for Google Maps widget? For example, I need only [SW corner: 40.5, -25.5] - [NE corner 79.5, 178.5] rectangle. Now I'm using such code from another question:

var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.5, -25.5), 
    new google.maps.LatLng(79.5, 178.5)
);

// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function() {
    if (strictBounds.contains(map.getCenter())) return;

    // We're out of bounds - Move the map back within the bounds

    var c = map.getCenter(),
        x = c.lng(),
        y = c.lat(),
        maxX = strictBounds.getNorthEast().lng(),
        maxY = strictBounds.getNorthEast().lat(),
        minX = strictBounds.getSouthWest().lng(),
        minY = strictBounds.getSouthWest().lat();

        if (x < minX) x = minX;
        if (x > maxX) x = maxX;
        if (y < minY) y = minY;
        if (y > maxY) y = maxY;

        map.setCenter(new google.maps.LatLng(y, x));
  });

But it doesn't give needed effect - anyway, this code allows to zoom map and user sees fragments across the strict bounds.

So, I would like to know, is there any method in API v3 to crop nesseasary part from full world map?

Upvotes: 0

Views: 1979

Answers (2)

Alex Smith
Alex Smith

Reputation: 85

Finally, I decided to solve this problem as geocodezip advised. For details see source code of this page.

Upvotes: 1

paulitto
paulitto

Reputation: 4673

I think in your case you can just additionally disallow user to zoom out of your bounds by setting corresponding minZoom property

You can do it when initializing map, or after its already initialized like this:

 map.setOptions({minZoom:5});

Upvotes: 1

Related Questions