Skip to content Skip to sidebar Skip to footer
Home / Google Maps / Google Maps Api 3 / Javascript

Google Maps API Multiple KML Layers

Post a Comment
I'm not much of a programmer but I'm learning pretty fast. Excuse me if my code isn't pretty. I'm using the following code to pull .KMLs to a styled map using google maps API. I've

Solution 1:

I have played a little bit with your code

this work ..

   <!DOCTYPE html>
    <html>
      <head>
      <style>
        #map {
         width: 100%;
          height: 400px;
      }
      </style>
<script src="https://maps.googleapis.com/maps/api/js"></script>

    </head>
     <body>

        <div id="map" style="width: 1000px; height: 1000px;"></div>


<script>
 /**
 * @fileoverview Sample showing capturing a KML file click
 *   and displaying the contents in a side panel instead of
 *   an InfoWindow
 */
var map;


/**
 * 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

  });

  var layers = [];
      layers [0] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9AB.kml",{
        preserveViewport: false,
        map: map
      });

      layers [1] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9FirstNations1.kml",{
        preserveViewport: false,
        map: map
      });

      layers [2] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9FirstNations2.kml",{
        preserveViewport: false,
      map: 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' } 
  ] }

]);

}

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Post a Comment for "Google Maps API Multiple KML Layers"