Google Maps API 3 – zoom not honored

by

if you don’t want the map zoomed to fit the KmlLayer content, set the preserveViewport option to true.

working code snippet:

  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>

More Related Contents:

  1. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  2. How to get descriptions of imported Google maps landmarks?
  3. Google Maps JS API v3 – Simple Multiple Marker Example
  4. Google MAP API Uncaught TypeError: Cannot read property ‘offsetWidth’ of null
  5. Google Map API v3 — set bounds and center
  6. Google Map API – multiple icons in wrong spot
  7. What’s the API Key for in Google Maps API V3?
  8. Map isn’t showing on Google Maps JavaScript API v3 when nested in a div tag
  9. google maps move marker with lat/lng from ajax success returned data
  10. Center/Set Zoom of Map to cover all visible Markers?
  11. Do I need to hide API key when using google maps js API? If so, how?
  12. How to set zoom level in google map
  13. rotate a .gif image on google maps api v3?
  14. Get a polyline from Google maps directions V3
  15. Google Maps – How to get the distance between two point in metre?
  16. Load google maps v3 dynamically with ajax
  17. Google MAP API v3: Center & Zoom on displayed markers
  18. How to get the formatted address from a dragged marker in Google Version Maps
  19. Add Marker function with Google Maps API
  20. How to draw a polygon around a polyline in JavaScript?
  21. Google Maps API – Closest marker function change to closest n markers
  22. Open infoWindows from an external link outside of the google map
  23. unable to set a LatLngBounds with longitude from -180 to 0
  24. Animating Multiple Markers
  25. Google map custom marker with css rounded corner
  26. Google Maps: Auto close open InfoWindows?
  27. fitbounds() in Google maps api V3 does not fit bounds
  28. Custom Google Map API V3 Zoom Buttons
  29. AngularJS ng-include inside of Google Maps InfoWindow?
  30. Google maps API V3 method fitBounds()

Leave a Comment