Hoe het zoomniveau in Google Maps in te stellen

October 12, 2021

Hier is de code die ik heb geschreven om een markering aan de Google-kaart toe te voegen door de lengte- en breedtegraad op te geven. Het probleem is dat ik een zeer sterk ingezoomde Google-kaart krijg. Ik heb geprobeerd het zoomniveau op 1 te zetten, maar dit heeft geen effect op de zeer sterk ingezoomde kaart.

<script src="https://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
     <script type="text/javascript">
        var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",new google.maps.Size(32, 32), new google.maps.Point(0, 0),new google.maps.Point(16, 32));
        var center = null;
        var map = null;
        var currentPopup;
        var bounds = new google.maps.LatLngBounds();
        function addMarker(lat, lng, info) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
                icon: icon,
                map: map
            });
            var popup = new google.maps.InfoWindow({
                content: info,
                maxWidth: 300
            });
            google.maps.event.addListener(marker, "click", function() {
                if (currentPopup != null) {
                    currentPopup.close();
                    currentPopup = null;
                }
                popup.open(map, marker);
                currentPopup = popup;
            });
            google.maps.event.addListener(popup, "closeclick", function() {
                map.panTo(center);
                currentPopup = null;
            });
        }
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(0, 0),
            zoom: 1,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            }
        });
        addMarker(27.703402,85.311668,'New Road');
        center = bounds.getCenter();
        map.fitBounds(bounds);
        }
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</body>
</html>

Hoe kan ik het zoomniveau voor dit geval verlagen?

Antwoord 1, autoriteit 100%

Uw onderstaande code zoomt de kaart in om binnen de opgegeven grenzen te passen:

addMarker(27.703402,85.311668,'New Road');
center = bounds.getCenter();
map.fitBounds(bounds);

Als je maar 1 markering hebt en deze aan de grenzen toevoegt, resulteert dit in de dichtst mogelijke zoom:

function addMarker(lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  bounds.extend(pt);
}

Als je het aantal markeringen bijhoudt dat je aan de kaart hebt “toegevoegd” (of de grenzen hebt vergroot), kun je fitBounds alleen bellen als dat aantal groter is dan één. Ik duw de markeringen meestal in een array (voor later gebruik) en test de lengte van die array.

Als je maar één markering hebt, gebruik dan geen fitBounds. Bel setCenter, setZoommet de markeringspositie en het gewenste zoomniveau.

function addMarker(lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  map.setCenter(pt);
  map.setZoom(your desired zoom);
}

Antwoord 2, autoriteit 21%

map.setZoom(zoom:number)

https://developers.google.com/maps/documentation/javascript/reference#Map

Antwoord 3, autoriteit 18%

Wat u zoekt, zijn de schalen voor elk zoomniveau. De cijfers zijn in meters. Gebruik deze:

20 : 1128.497220

19 : 2256.994440

18 : 4513.988880

17: 9027.977761

16 : 18055.9555520

15 : 36111.911040

14 : 72223.822090

13: 144447.644200

12: 288895.288400

11: 577790.576700

10: 1155581.153000

9 : 2311162.307000

8: 4622324.614000

7 : 9244649.227000

6 : 18489298.450000

5 : 36978596.910000

4 : 73957193.820000

3 : 147914387.600000

2 : 295828775.300000

1 : 591657550.500000

Antwoord 4, autoriteit 12%

Als u op twee niveaus op uw kaart wilt inzoomen, voegt u deze kleine regel code toe,

map.setZoom(map.getZoom() + 2);

Antwoord 5, autoriteit 5%

Hier is een functie die ik gebruik:

var map =  new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(52.2, 5),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 7
        });
function zoomTo(level) {
        google.maps.event.addListener(map, 'zoom_changed', function () {
            zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function (event) {
                if (this.getZoom() > level && this.initialZoom == true) {
                    this.setZoom(level);
                    this.initialZoom = false;
                }
                google.maps.event.removeListener(zoomChangeBoundsListener);
            });
        });
    }

Antwoord 6, autoriteit 2%

Deze methoden werkten voor mij, het is misschien nuttig voor iedereen:
MapOptions-interface

min zoom instellen:mMap.setMinZoomPreference(N);

max zoom instellen:mMap.setMaxZoomPreference(N);

waarbij N gelijk kan zijn aan: