Google Maps API 3 - zoom not honored

» javascript » Google Maps API 3 - zoom not honored

By : Amit Singla

Date : November 17 2020, 11:55 AM

this will help if you don't want the map zoomed to fit the KmlLayer content, set the preserveViewport option to true.
working code snippet:

code :

  var mylocation = {'latitude':  35.3,'longitude':  -120.3};
  var map;
  function initialize() {
    var myLatlng = new google.maps.LatLng( mylocation.latitude, mylocation.longitude );
    var mapOptions = {zoom: 12,center: myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    // This needs to be the Full URL - not a relative URL
    var kmlPath = "http://www.slocleanair.org/air/AQI_III/AQI_2015_xx_xx.kml";
    // Add unique number to this url - as with images - to avoid caching issues during development
    var urlSuffix = (new Date).getTime().toString();
    var layer = new google.maps.KmlLayer({url:kmlPath + '?' + urlSuffix, preserveViewport: true} );
    layer.setMap(map);
  }

  google.maps.event.addDomListener(window, 'load', initialize);

#map_canvas {margin-left: auto;margin-right: auto;padding: 0;width: 260px;height: 180px;}

<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Share :

why my code can't alert the map's zoom when zoom changed using MVCObject on google-maps v3

By : David Gauld

Date : March 29 2020, 07:55 AM

Any of those help this is my code :

code :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var marker = new google.maps.Marker({
                position: map.getCenter(),
                draggable:true,
                map: map});
    //map.bounds_=map.getBounds()
    //console.log(map.get('bounds'))
    function A(){
        this.bindTo('zoom', map);
        //this.set('marker', marker);
        marker.bindTo('position',map,'center')
        //this.bindTo('')
    }
    A.prototype = new google.maps.MVCObject();
    A.prototype.zoom_changed = function () {
        //if(this.get('marker'))
        //console.log(this.get('marker'))
        console.log(map.get('center'))
    }
    google.maps.Marker.prototype.position_changed = function () {
        console.log('sss')
    }
    var a=new A()
    }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

How do I make Google Maps zoom with the scroll wheel when using a custom zoom bar?

By : Oren

Date : March 29 2020, 07:55 AM

like below fixes the issue Your custom zoom bar has nothing to do with mousewheel zooming.Just make sure you don't set the mousewheel:false in the mapoptions as the default is true.That way the mousewheel zooming will work regardless your custom controls functionality

android google maps project showing blank page with zoom in and zoom out buttons

By : Aditya Kurniawan

Date : March 29 2020, 07:55 AM

Hope this helps Make sure your API key is generated with SHA-1 key + package name mentioned in the android manifest file not but your actual package.

Google Maps JS: pinch to zoom Google Maps without moving marker (ie. Uber & Lyft)

By : Marc Cardacci

Date : March 29 2020, 07:55 AM

I hope this helps . There are two possible solutions for this issue , from what i have read that you have tried using native marker but it is lagging , which itself is another issue that i have a suggestion for :

google maps circle overlay - fixed size on zoom in and zoom out of the map

By : Scott_Wang

Date : March 29 2020, 07:55 AM

With these it helps I'm trying to add a circle overlay to a map, but I have to make the circle to stay the same size if a user zooms in or out of the map The below code shows how I am displaying the circle on the map , There are a couple of options: