title: Google Maps API Multiple KML Layers
body: <p>I'm not much of a programmer but I'm learning pretty fast. Excuse me if my code isn't pretty.</p>
  
  <p>I'm using the following code to pull .KMLs to a styled map using google maps API. I've got this down pretty well and have looked for various solutions, but I'm struggling to call multiple .KML layers to the map at once. </p>
  
  <p>The code I've used below has been pulled from multiple sources including other posts here at stack (I did search before posting) but it is not quite working so I must have missed something with the way the layers variable is referenced. Why aren't my .KML layers showing up?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      &lt;style&gt;
        #map {
          width: 100%;
          height: 400px;
        }
  &lt;/style&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
  &lt;script&gt;
   /**
   * @fileoverview Sample showing capturing a KML file click
   *   and displaying the contents in a side panel instead of
   *   an InfoWindow
   */
  var map;
  var layers = [];
        layers [0] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9AB.kml",{
          preserveViewport: false
        });
  
        layers [1] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9FirstNations1.kml",{
          preserveViewport: false
        });
  
        layers [2] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9FirstNations2.kml",{
          preserveViewport: false
        });
  
  /**
   * Initializes the map and calls the function that creates polylines.
   */
  function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(43.6424359, -79.37448849999998),
      zoom: 2,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROAD
  
    });
     loadKmlLayer(layers, map);
  }
  
   map.set('styles', [
    {
     featureType: 'all', 
     elementType: 'geometry.fill', 
     stylers: [ 
       { visibility: 'off' }, 
       { color: '#000000' }
       ]
       },
    { 
     featureType: 'landscape.natural.terrain', 
     elementType: 'geometry.stroke', 
     stylers: [ 
       { visibility: 'on' }, 
       { color: '#FFFFFF' }, 
       { weight: 1 } 
     ] 
    },
    {
     featureType: 'landscape.natural.terrain', 
     elementType: 'geometry.fill', 
     stylers: [ 
       { visibility: 'on' }, 
       { color: '#FFFFFF' }
       ]
       },
    {
      featureType: 'landscape.natural.terrain', 
      stylers: [ 
        { visibility: 'on' },
        ]
        },
  {
     featureType: 'water', 
     elementType: 'geometry.fill', 
     stylers: [ 
       { visibility: 'on' }, 
       { color: '#365F91' }
       ]
       },
    {
      featureType: 'road',
      elementType: 'geometry',
      stylers: [
        { visibility: 'on' }
      ]
    }, {
      featureType: 'road',
      elementType: 'labels',
      stylers: [
        { visibility: 'on' }
      ]
    }, {
    featureType: 'poi',
    elementType: 'geometry',
    stylers: [
      { visibility: 'off' }
    ]
  }, { 
    elementType: 'labels.icon', 
    stylers: [ 
      { visibility: 'on' } 
    ] },
    { 
    elementType: 'labels.text.stroke', 
    stylers: [ 
      { visibility: 'on' } 
    ] },
    { 
    elementType: 'labels.text.fill', 
    stylers: [ 
      { visibility: 'on' } 
    ] }
  
  ]);
  }
  
  
  /**
   * Adds a KMLLayer based on the URL passed. 
   */
  function loadKmlLayer(layers, map) {
    var kmlLayer = new google.maps.KmlLayer(layers, {
  
      preserveViewport: false,
      map: map});
  
  }
  
  
        google.maps.event.addDomListener(window, 'load', initialize);
      &lt;/script&gt;
  </code></pre>