Search code examples
javascriptfilemapskmlkmz

Google Maps API KMZ file displaying wrong data on click event

I have a KMZ file that i load into my google maps application via link using javascript. The file works perfectly in Google Earth. The problem is in my application when i click in one of the many elements (areas): the returned description data is always from only one of the elements, not displaying the actual clicked, correct, element. This is what i've tried:

  1. Check if the click event in the map is correct by placing a marker in the clicked position, it is correct.

  2. Convert the data into KML using Google Earth, place it into my google drive as public, and using a direct download link from google drive in my application. It displayed the data but the error continued.

  3. Created the most basic/blank application using just the layer to make sure anything else in my other application is interfering. Also didn't work.

The file is in this website: https://www.voanaboa.pt/codigo-drone named as "Regulamento RPA_ver_5.0.kmz”

Here's the only file that creates a basic application using the kmz file, i've removed my API key for privacy.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });

    var kmlLayer = new google.maps.KmlLayer();
    var src = 'https://www.voanaboa.pt/Files/downloads/Regulamento-RPA-ver-5.0.kmz';
    var kmlLayer = new google.maps.KmlLayer(src, {
        //suppressInfoWindows: true,
        preserveViewport: false,
        map: map
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=geometry&callback=initMap"
async defer></script>

Solution

  • Most (but not all) of your placemarks have the same ID "ID_00000"). If I change that to be unique, the polygon's descriptions become unique:

    example with unique ids

    Per the KML reference, that doesn't have to be unique (it is a "stanard XML ID", but I am guessing the rendering code is assuming it is.

    code snippet with updated kmz file:

    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
    <div id="map"></div>
<script>
  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: -34.397,
        lng: 150.644
      },
      zoom: 8
    });

    var kmlLayer = new google.maps.KmlLayer();
    var src = 'http://www.geocodezip.com/geoxml3_test/kmz/Regulamento-RPA-ver-5.0a.kmz';
    var kmlLayer = new google.maps.KmlLayer(src, {
      //suppressInfoWindows: true,
      preserveViewport: false,
      map: map
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>