web-dev-qa-db-fra.com

Comment définir le niveau de zoom dans google map

Voici le code que j'ai écrit pour ajouter un marqueur à la carte Google en fournissant la latitude et la longitude. Le problème est que je reçois une carte google très fortement zoomée. J'ai essayé de régler le niveau de zoom sur 1, mais cela n'a aucun effet sur la carte très fortement zoomée.

 <script src="http://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>

Comment puis-je diminuer le niveau de zoom pour ce cas?

javascriptgoogle-mapsgoogle-maps-api-3
60
rockstar

Votre code ci-dessous fait un zoom sur la carte pour l'adapter aux limites spécifiées:

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

Si vous n’avez qu’un seul marqueur et que vous l’ajoutez aux limites, le zoom sera le plus proche possible:

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

Si vous gardez une trace du nombre de marqueurs que vous avez "ajoutés" à la carte (ou que vous avez étendu les limites avec), vous ne pouvez appeler fitBounds que si ce nombre est supérieur à un. J'ai l'habitude de pousser les marqueurs dans un tableau (pour une utilisation ultérieure) et de tester la longueur de ce tableau.

Si vous n’avez qu’un seul marqueur, n’utilisez pas fitBounds. Appelez setCenter, setZoom avec la position du marqueur et le niveau de zoom souhaité.

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

map.setZoom(zoom:number)

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

17
Ties

Ce que vous recherchez, ce sont les échelles pour chaque niveau de zoom. Les chiffres sont en mètres. Utilisez ceux-ci:

20: 1128.497220

19: 2256.994440

18: 4513,988880

17: 9027,977761

16: 18055.955520

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

15
Rahul Shinde

Pour zoomer sur la carte à deux niveaux, ajoutez simplement ce petit code de ligne map.setZoom(map.getZoom() + 2);

12
Anup

Voici une fonction que j'utilise:

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);
            });
        });
    }
5
Bas Slagter

Ces méthodes ont fonctionné pour moi, cela peut être utile pour n'importe qui: interface MapOptions

régler le zoom minimum: mMap.setMinZoomPreference(N);

régler le zoom maximal: mMap.setMaxZoomPreference(N);

où N peut être égal à:

20: 1128.497220

19: 2256.994440

18: 4513,988880

17: 9027,977761

16: 18055.955520

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

0
Mahmoud Ayman