logo
down
shadow

Google Maps API 3 - zoom not honored


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 : facebook icon twitter icon
why my code can't alert the map's zoom when zoom changed using MVCObject on google-maps v3

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?

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

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)

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

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:
Related Posts Related Posts :
  • angular 6 Please add a @NgModule annotation
  • Trying to cast element ID to class selector in jQuery
  • Swipe JS - Display 3 Slides at a time
  • Jasmine test to call function when value is null
  • Redux reducer gets string instead of object
  • Keep chrome javascript running even if page reload
  • The event.target.value is not insert the userinput into a variable
  • Exporting HTML tables to Excel (.xls) in a separate sheet
  • Jquery tooltip on dialog close button
  • access variable inside anonymous function from outside
  • How come func is called from a function?
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org