Google Map API (multiple maps on one page using different kml files) - Second map not loading

时间:2016-08-31 18:14:49

标签: javascript google-maps google-maps-api-3

I'm putting 2+ maps on one page of a website. Each map loads in a different kml file. The first map loads the correct kml file. However, the second one does not load the data from the second kml file. Just a blank map. Below is my code. Any help would be greatly appreciated.

Here is my html...

<div id="map_canvas"></div>
<div id="map_canvas_2" ></div>

Here is my Javascript...

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=<MY API KEY>"> </script>
<script>
  var map, map2;
  var mylocation = {
    'latitude':  47.7706093,
    'longitude': -122.1514458
  };
    // This needs to be the Full URL - not a relative URL
    var kmlPath = "<PATH TO FIRST KML FILE>";
    var kmlPath2 = "<PATH TO SECOND KML FILE>";

  function initialize() {
    var myLatlng = new google.maps.LatLng( mylocation.latitude, mylocation.longitude );
    var mapOptions = {
      zoom: 3,
      center: myLatlng,
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions, kmlPath);
    map2 = new google.maps.Map(document.getElementById('map_canvas_2'), mapOptions, kmlPath2);

    // 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);
</script>

1 个答案:

答案 0 :(得分:0)

看起来,您只对地图对象(您的第一张地图)使用了layer.setMap(..)。你将不得不再添加一个layer.setMap(...);也是你的第二张地图。

希望这有帮助!