Search code examples
javascriptgoogle-mapskml

KML Layer not displaying on Map


I'm trying to display a KML on a Google Map. The map loads perfectly, but the KML doesn't shows up at all. Also, I don't get any error messages in console.

I downloaded a .kmz file from gadm.org, unzipped it and extracted the .kml file.

Here is my code, and the URL for my KML. http://locallocal.com/endline/mex2.kml

<script>
  var map;
  var src = 'http://locallocal.com/endline/mex2.kml';

  /**
   * Initializes the map and calls the function that loads the KML layer.
   */
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(-19.257753, 146.823688),
      zoom: 2,
      mapTypeId: 'roadmap'
    });
    loadKmlLayer(src, map);
  }

  /**
   * Adds a KMLLayer based on the URL passed. Clicking on a marker
   * results in the balloon content being loaded into the right-hand div.
   * @param {string} src A URL for a KML file.
   */
  function loadKmlLayer(src, map) {
    var kmlLayer = new google.maps.KmlLayer(src, {
      suppressInfoWindows: true,
      preserveViewport: false,
      map: map
    });
    google.maps.event.addListener(kmlLayer, 'click', function(event) {
      var content = event.featureData.infoWindowHtml;
      var testimonial = document.getElementById('capture');
      testimonial.innerHTML = content;
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[MYKEY]&callback=initMap">

Solution

  • I get Kml Status:INVALID_DOCUMENT (link) with that KML. Your KML is too large (it is 5.8 MB), it doesn't meet this requirement from the documentation:

    • Maximum fetched file size (raw KML, raw GeoRSS, or compressed KMZ) 3MB

    I can load it with geoxml3 which doesn't have that restriction.

    Or I can zip it up (make it a .kmz file), and it works (it is 1.3 MB):

    loading it as a KMZ file