Setting zoom level doesn't work on Google Map

Question

I'm learning web developing and I'm using JavaScript to show Google Map. Here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Google Map</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function loadData(callback) {
            var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
            xobj.onreadystatechange = function () {
                if (xobj.readyState == 4 && xobj.status == "200")
                    callback(xobj.responseText);
            }
            xobj.open("GET", "data.json", true);
            xobj.send(null);
        }

        window.onload = function () {
            loadData(function(response) {
                markers = JSON.parse(response);

            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 2,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            for (var i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.title + "</div>");
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
                latlngbounds.extend(marker.position);
            }
            var bounds = new google.maps.LatLngBounds();
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);
            });
        }
    </script>
    <style>
    /* style settings for Google map */
    #map-canvas {
        width : 1200px; /* map width */
        height: 600px;  /* map height */
    }
    </style>
</head>
<body> 
    <!-- Dislay Google map here -->
    <div id='map-canvas' ></div>
</body>
</html>

I'm trying to change the zoom level, but it doesn't work. I tried to set, for example, 6 or 8 but it doesn't change. What could be the reason?

score 21 · Accepted Answer · edited May 23 '17 at 11:53

The .fitBounds method resets the viewport and thus your zoom level is not taken in account. Here is a minimal working example: https://jsfiddle.net/pdnsown1/1/.

If you comment the line containing the call to .fitBounds and change the zoom level, you will see that it is actually applied. However, if you leave that line uncommented, the zoom level will not be taken in account.

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

EDIT: To limit the map position to given bounds, you have to listen to the drag event and reset the position within the bounds whenever the user drags outside of them (see https://stackoverflow.com/a/9103195/3452708).

I updated the fiddle to show you how: https://jsfiddle.net/pdnsown1/2/.

Makwana Ketan · Answer 2 · 2018-03-05T04:39:02.363

6

I tried this one and worked for me.

add this code after map.fitBounds(bounds)

var listener = google.maps.event.addListener(map, "idle", function() { map.setZoom(16); google.maps.event.removeListener(listener); });

edited Mar 05 '18 at 04:39

answered Mar 01 '18 at 09:48

Makwana Ketan

1,380
1
14
22

Thanks, sir. It seems we have to wait until the map finished executing the fitBounds() methods. It would have been nice by the google to include a promise api for methods that take time to finish... – Patronaut Oct 24 '20 at 21:44
Here is a link to the official docs about events https://developers.google.com/maps/documentation/javascript/events – Patronaut Oct 24 '20 at 21:59

score 0 · Answer 3 · answered Mar 06 '18 at 13:59

I ended up with code like this. Using jqueryuimap:

  $("#map_canvas_spot_detail").gmap("addMarker", {
    position: new google.maps.LatLng(LAT, LON)
  });
  $("#map_canvas_spot_detail").gmap("option", "center", new google.maps.LatLng(LAT, LON));
  return $("#map_canvas_spot_detail").gmap("option", "zoom", 15);

Setting zoom level doesn't work on Google Map

3 Answers3