Google Maps v3 - Begrenzung des sichtbaren Bereichs und der Zoomstufe

Eine bessere Möglichkeit, die Zoomstufe einzuschränken, wäre die Verwendung der Optionen minZoom/maxZoom, anstatt auf Ereignisse zu reagieren.

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

Oder die Optionen können während der Karteninitialisierung angegeben werden, z.

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

Siehe: Google Maps - Referenz zu JavaScript API V3

Um den Zoom auf v.3 + . In Ihrer Karteneinstellung zu begrenzen, fügen Sie die Standard-Zoomstufe und minZoom oder maxZoom (oder beide, falls erforderlich) hinzu wenn eine Begrenzung erforderlich ist. alle sind case sensitive!

function initialize() {
   var mapOptions = {
      maxZoom:17,
      minZoom:15,
      zoom:15,
      ....

Besserer Weg, um den Bereich zu begrenzen ... verwendet die Logik von oben.

var dragStartCenter;

google.maps.event.addListener(map, 'dragstart', function(){
                                       dragStartCenter = map.getCenter();
                                         });

google.maps.event.addListener(this.googleMap, 'dragend', function(){
                            if (mapBounds.contains(map.getCenter())) return;
                    map.setCenter(this.dragStart);
                           });

Gute Nachrichten. Ab der Version 3.35 von Maps JavaScript API, die am 14. Februar 2019 gestartet wurde, können Sie die neue Option restriction verwenden, um den Ansichtsbereich der Karte zu beschränken. 

Nach der Dokumentation

MapRestriction-Schnittstelle

Eine Einschränkung, die auf die Karte angewendet werden kann. Das Ansichtsfenster der Karte überschreitet diese Einschränkungen nicht.

source: https://developers.google.com/maps/documentation/javascript/reference/3.35/map#MapRestriction

Nun fügen Sie also während einer Karteninitialisierung nur noch eine Einschränkungsoption hinzu. Schauen Sie sich das folgende Beispiel an, das Viewport auf die Schweiz beschränkt

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 46.818188, lng: 8.227512},
    minZoom: 7,
    maxZoom: 14,
    zoom: 7,
    restriction: {
      latLngBounds: {
        east: 10.49234,
        north: 47.808455,
        south: 45.81792,
        west: 5.95608
      },
      strictBounds: true
    },
  });
}

#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" async defer></script>

Ich hoffe das hilft!

myOptions = {
        center: myLatlng,
        minZoom: 6,
        maxZoom: 9,
        styles: customStyles,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

Dies kann verwendet werden, um die Karte auf einen bestimmten Ort zu zentrieren. Was ich brauchte.

    var MapBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(35.676263, 13.949096),
    new google.maps.LatLng(36.204391, 14.89038));

    google.maps.event.addListener(GoogleMap, 'dragend', function ()
    {
        if (MapBounds.contains(GoogleMap.getCenter()))
        {
            return;
        }
        else
        {
            GoogleMap.setCenter(new google.maps.LatLng(35.920242, 14.428825));
        }
    });

Eine Lösung ist wie, wenn Sie die spezifische Lat/Lng kennen.

google.maps.event.addListener(map, 'idle', function() {

    map.setCenter(new google.maps.LatLng(latitude, longitude));
    map.setZoom(8);

});

Wenn Sie kein spezifisches Lat/Lng haben

google.maps.event.addListener(map, 'idle', function() {

    map.setCenter(map.getCenter());
    map.setZoom(8);

});

oder

google.maps.event.addListener(map, 'idle', function() {

    var bounds = new google.maps.LatLngBounds();
    map.setCenter(bounds.getCenter());
    map.setZoom(8);

});

Aus irgendeinem Grund

if (strictBounds.contains(map.getCenter())) return;

funktionierte nicht für mich (vielleicht eine südliche Hemisphäre). Ich musste es ändern in:

    function checkBounds() {
        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 > maxX || y < minY || y > maxY) {
            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));
        }
    }

Ich hoffe es hilft jemandem.

Hier ist meine Variante, um das Problem der Begrenzung des sichtbaren Bereichs zu lösen.

        google.maps.event.addListener(this.map, 'idle', function() {
            var minLat = strictBounds.getSouthWest().lat();
            var minLon = strictBounds.getSouthWest().lng();
            var maxLat = strictBounds.getNorthEast().lat();
            var maxLon = strictBounds.getNorthEast().lng();
            var cBounds  = self.map.getBounds();
            var cMinLat = cBounds.getSouthWest().lat();
            var cMinLon = cBounds.getSouthWest().lng();
            var cMaxLat = cBounds.getNorthEast().lat();
            var cMaxLon = cBounds.getNorthEast().lng();
            var centerLat = self.map.getCenter().lat();
            var centerLon = self.map.getCenter().lng();

            if((cMaxLat - cMinLat > maxLat - minLat) || (cMaxLon - cMinLon > maxLon - minLon))
            {   //We can't position the canvas to strict borders with a current zoom level
                self.map.setZoomLevel(self.map.getZoomLevel()+1);
                return;
            }
            if(cMinLat < minLat)
                var newCenterLat = minLat + ((cMaxLat-cMinLat) / 2);
            else if(cMaxLat > maxLat)
                var newCenterLat = maxLat - ((cMaxLat-cMinLat) / 2);
            else
                var newCenterLat = centerLat;
            if(cMinLon < minLon)
                var newCenterLon = minLon + ((cMaxLon-cMinLon) / 2);
            else if(cMaxLon > maxLon)
                var newCenterLon = maxLon - ((cMaxLon-cMinLon) / 2);
            else
                var newCenterLon = centerLon;

            if(newCenterLat != centerLat || newCenterLon != centerLon)
                self.map.setCenter(new google.maps.LatLng(newCenterLat, newCenterLon));
        });

strictBounds ist ein Objekt vom Typ new google.maps.LatLngBounds(). self.gmap speichert ein Google Map-Objekt (new google.maps.Map()).

Es funktioniert wirklich, aber vergessen Sie nicht, die Hämorrhoiden zu berücksichtigen, wenn Sie Meridiane und Parallelen des 0.

Ab Mitte 2016 gibt es keine offizielle Möglichkeit, sichtbare Bereiche einzuschränken. Die meisten Ad-hoc-Lösungen zur Begrenzung der Grenzen haben jedoch einen Fehler, da sie die Grenzen nicht genau auf die Kartenansicht einschränken, sondern nur, wenn der Mittelpunkt der Karte außerhalb der angegebenen Grenzen liegt. Wenn Sie die Grenzen auf ein überlagerndes Bild wie ich beschränken möchten, kann dies zu einem Verhalten wie unten dargestellt führen, bei dem die darunterliegende Karte unter unserer Bildüberlagerung sichtbar ist:

Um dieses Problem anzugehen, habe ich eine library erstellt, die die Grenzen erfolgreich einschränkt, sodass Sie nicht aus der Überlagerung heraus schwenken können.

Bei anderen bestehenden Lösungen besteht jedoch ein "vibrierendes" Problem. Wenn der Benutzer die Karte aggressiv genug schwenkt, nachdem er die linke Maustaste losgelassen hat, schwenkt die Karte immer noch von selbst und verlangsamt sich allmählich. Ich kehre die Karte immer wieder an die Grenzen zurück, aber das führt zu einer Art Vibration. Dieser Panning-Effekt kann derzeit nicht mit Mitteln der Js-API gestoppt werden. Es scheint, dass, bis Google Unterstützung für etwas wie map.stopPanningAnimation () hinzufügt, wir keine reibungslose Benutzererfahrung schaffen können.

Beispiel für die Verwendung der erwähnten Bibliothek, die glatteste Erfahrung mit strengen Grenzen, die ich erhalten konnte:

function initialise(){
  
  var myOptions = {
     zoom: 5,
     center: new google.maps.LatLng(0,0),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  var map = new google.maps.Map(document.getElementById('map'), myOptions);
  
  addStrictBoundsImage(map);
}

function addStrictBoundsImage(map){
	var bounds = new google.maps.LatLngBounds(
		new google.maps.LatLng(62.281819, -150.287132),
		new google.maps.LatLng(62.400471, -150.005608));

	var image_src = 'https://developers.google.com/maps/documentation/' +
		'javascript/examples/full/images/talkeetna.png';

	var strict_bounds_image = new StrictBoundsImage(bounds, image_src, map);
}

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load("maps", "3",{other_params:"sensor=false"});
      </script>
<body style="margin:0px; padding:0px;" onload="initialise()">
	 <div id="map" style="height:400px; width:500px;"></div>
     <script  type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script>
</body>

Die Bibliothek kann auch die minimale Zoomeinschränkung automatisch berechnen. Dann wird die Zoomstufe mit dem Attribut minZoom map eingeschränkt.

Hoffentlich hilft dies jemandem, der eine Lösung wünscht, die die vorgegebenen Grenzen uneingeschränkt respektiert und kein Panning zulassen möchte.