javascript - Google Maps API 3 - zoom not honored

Question

I am trying to develop an HTML page that displays a KML file via Google Maps API.

link to the page: http://www.slocleanair.org/air/AQI_III/mapTest.html

My problem is that the zoom option is not being honored when I replace the file with an updated value for the zoom. I think this is a caching problem with the web in general but the JavaScript should add a suffix that breaks the cache by creating a unique urlSuffix.

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(kmlPath + '?' + urlSuffix );
layer.setMap(map);

Should this technique be working to allow me to reference a file with the same name without pulling a previous version from cache? Or is this a Google Maps API problem? Or a coding error on my part?

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(kmlPath + '?' + urlSuffix);
  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="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Answer 1

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>