将具有KML的相同地图放置在具有不同中心和缩放的页面上两次

Question

I'm trying to place two maps with a KMLLayer side-by-side. I have been able to get the maps to appear but they both use the same center lat/long ie the lat/long is not being honored for the second map. I want to zoom in to the lower left of the first map 35.04, -120.56 to display more detail. How can I center/zoom the second map?

I'm new to Fiddle - hopefully works: http://jsfiddle.net/BobH_SLOAPCD/d427zc46/4/

Map script

function initialize() {
  var myLatlng = new google.maps.LatLng(35.3, -120.3);

  var mapOptions = {
    maxZoom: 12,
    minZoom: 7,
    center: myLatlng,
    preserveViewport: true
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://www.slocleanair.org/air/AQI_III/AQI_2015_yy_yy.kml',
    suppressInfoWindows: true,
    map: map
  });

  var myLatlng2 = new google.maps.LatLng(34.9, -120.5);

  var mapOptions2 = {
    maxZoom: 18,
    minZoom: 8,
    zoom: 9,
    center: myLatlng2,
    preserveViewport: true
  };

  var map2 = new google.maps.Map(document.getElementById('map-canvas2'),
  mapOptions2);

  var kmlLayer2 = new google.maps.KmlLayer({
    url: 'http://www.slocleanair.org/air/AQI_III/AQI_2015_yy_yy.kml',
    suppressInfoWindows: true,
    map: map2
  });
}
initialize();

HTML:

 <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <p>Test KML Layers</p>
 <div id="map-canvas"></div>
 <div id="map-canvas2"></div>

CSS

#map-canvas {
  width: 260px;
  height: 180px;
  padding: 10px;
  border: 2px solid #999;
  float:left;
}
#map-canvas2 {
  width: 260px;
  height: 180px;
  padding: 10px;
  border: 2px solid #999;

Answer 1

The preserveViewport option is a KmlLayers option, not a google.maps.Map option . Note that if you use preserveViewport for both of the KmlLayers, you need to set the two mandatory options for the map (zoom and center).

working fiddle

working code snippet:

 function initialize() { var myLatlng = new google.maps.LatLng(35.3, -120.3); var mapOptions = { maxZoom: 12, minZoom: 7, center: myLatlng }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var kmlLayer = new google.maps.KmlLayer({ url: 'http://www.slocleanair.org/air/AQI_III/AQI_2015_yy_yy.kml', suppressInfoWindows: true, map: map, // preserveViewport: true }); var myLatlng2 = new google.maps.LatLng(34.9, -120.5); var mapOptions2 = { maxZoom: 18, minZoom: 8, zoom: 9, center: myLatlng2 }; var map2 = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions2); var kmlLayer2 = new google.maps.KmlLayer({ url: 'http://www.slocleanair.org/air/AQI_III/AQI_2015_yy_yy.kml', suppressInfoWindows: true, map: map2, preserveViewport: true }); } initialize(); 

 #map-canvas { width: 260px; height: 180px; padding: 10px; border: 2px solid #999; float:left; } #map-canvas2 { width: 260px; height: 180px; padding: 10px; border: 2px solid #999; } 

 <script src="http://maps.googleapis.com/maps/api/js"></script> <p>Test KML Layers</p> <div id="map-canvas"></div> <div id="map-canvas2"></div> <p>Big Map</p>