How to set zoom level in google map

Question

Here is the code I have written to add a marker to the google map by providing latitude and longitude. The problem is that I get a very highly zoomed google map. I have tried setting the zoom level to 1 but this has no effect to the very highly zoomed map.

 <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>

How can i decrease the level of zoom for this case?

geocodezip · Accepted Answer · 2020-11-03T22:00:21.367

Your code below is zooming the map to fit the specified bounds:

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

If you only have 1 marker and add it to the bounds, that results in the closest zoom possible:

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

If you keep track of the number of markers you have "added" to the map (or extended the bounds with), you can only call fitBounds if that number is greater than one. I usually push the markers into an array (for later use) and test the length of that array.

If you will only ever have one marker, don't use fitBounds. Call setCenter, setZoom with the marker position and your desired zoom level.

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

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

<html>

<head>
  <script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" 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);
      map.setCenter(pt);
      map.setZoom(5);
      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>

score 31 · Answer 2 · answered Jul 12 '12 at 14:40

31

map.setZoom(zoom:number)

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

answered Jul 12 '12 at 14:40

Ties

5,726
3
28
37

score 25 · Answer 3 · edited Oct 17 '18 at 14:56

25

What you're looking for are the scales for each zoom level. The numbers are in metres. Use these:

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

edited Oct 17 '18 at 14:56

Jeff

13,943
11
55
103

answered Aug 15 '15 at 18:36

Rahul Shinde

1,522
1
15
17

What is zoom level? For instance, for 20 will it show 1128.497220 m of a street for 1 m of a display? – CoolMind Jun 05 '19 at 13:22
@CoolMind I was trying to understand this as well and it looks like it depends on the PPI of your screen. Open street map provides scale, which differs from Google scale, but it gives more information about scaling process. e.g 0.298m * 1080 pixels (wide) gives approximately 322 m across the screen (in portrait mode) I haven't tested this, but it looks like it is a good starting point to get the zoom adjustment based on the device screen. https://wiki.openstreetmap.org/wiki/Zoom_levels – Pitos Jul 15 '19 at 16:32
1

Thanks! Your answer helped me to understand that decreasing a zoom level by 1 multiplies a distance by 2 on a screen. I used this fact in later development. I needed to change zoom level when changing circle radius (for instance, 5, 10, 20, 100 km). In order to get appropriate zoom level for chosen distance on a screen (Android device) I had to write this solution: https://stackoverflow.com/a/56464293/2914140 in Kotlin. – CoolMind Jul 15 '19 at 16:44

score 16 · Answer 4 · edited Jun 04 '21 at 19:12

16

For zooming in your map two levels, add this small line of code,

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

edited Jun 04 '21 at 19:12

Roshana Pitigala

8,437
8
49
80

answered Jul 05 '13 at 13:57

Anup

3,283
1
28
37

score 6 · Answer 5 · answered Jul 12 '12 at 14:41

Here is a function I use:

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);
            });
        });
    }

score 2 · Answer 6 · answered Mar 19 '19 at 13:21

These methods worked for me, it maybe useful for anyone: MapOptions interface

set min zoom: mMap.setMinZoomPreference(N);

set max zoom: mMap.setMaxZoomPreference(N);

where N can equal to: