Google map slightly moves after scrolling max zoom or min zoom level

Question

I have simple web application where I'm using google maps with javascript. I have set min and max zoom level in map like this: this.map.setOptions({ minZoom:3,maxZoom: 17 }); What I'm observing is after scroll ie either zoom in or zoom out and reaching max or min zoom level ,map slightly moves/slides instead of stopping further zoom in or zoom out. Previously it was working fine.Why this change occurred ? Is there any way to stop map movement after reaching max or min zoom level? this is how i'm loading map to div.

 self.map = new gmaps.Map(document.getElementById('map'), {         mapTypeControlOptions: {
                position: gmaps.ControlPosition.TOP_RIGHT,
                style: gmaps.MapTypeControlStyle.HORIZONTAL_BAR
            },
            fullscreenControl: false,
            backgroundColor: '#F7F7F7',
            clickableIcons: false,
            streetViewControl: false
        });

Zoom events are not handled in my code.After setting min and max zoom level then ,issue can be reproduced on mouse scroll. I observed this issue yesterday only.

Answer 1

I would suggest updating your code so that you can avoid issues like these in the future. Using the latest object names will help you avoid errors and/or warnings (like these) due to deprecation. As suggested by @Xomena, you may stay up-to-date with the experimental and release versions here .

However, I suggest getting ahead of the curve by updating the Google MapOptions object property names being called on by your code. Review the code sample below, you'll see that in Maps JS API documentation , the prefix google.maps for the Map Type control style property options is used; note that is is NOT gmaps.MapTypeControlStyle . Little updates like these help you stay ahead of future release versions.

The Map Type control may appear in one of the following style options:

google.maps.MapTypeControlStyle.HORIZONTAL_BAR displays the array of controls as buttons in a horizontal bar as is shown on Google Maps. google.maps.MapTypeControlStyle.DROPDOWN_MENU displays a single button control allowing you to select the map type via a dropdown menu. google.maps.MapTypeControlStyle.DEFAULT displays the default behavior, which depends on screen size and may change in future versions of the API.

<body>
<div id="map"></div>
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {lat: -28.643387, lng: 153.612224},
      mapTypeControl: true,
      mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
          position: google.maps.ControlPosition.TOP_CENTER
      },
      zoomControl: true,
      zoomControlOptions: {
          position: google.maps.ControlPosition.LEFT_CENTER
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
          position: google.maps.ControlPosition.LEFT_TOP
      },
      fullscreenControl: true
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>

Google map slightly moves after scrolling max zoom or min zoom level

Question

1 answers

solution1
1 2018-02-21 00:52:47

Google map slightly moves after scrolling max zoom or min zoom level

Question

1 answers

solution1 1 2018-02-21 00:52:47

solution1
1 2018-02-21 00:52:47