Search code examples
google-mapsgoogle-maps-api-3kmlkmz

Remove non-KML item from KMZ archive displayed on Google Map


I am loading a KMZ on a Google Map using google.maps.KmlLayer. The KMZ contains a KML layer and some image files. I would like to display only the KML file on my map, but the image files are added as well.

Is there any way to remove non-KML elements (like a PNG file) from a KMZ archive displayed using google.maps.KmlLayer? I can't seem to find the PNGs as elements in the DOM, otherwise I'd just hide or remove them that way.

One possible solution might be to download the KMZ to the server, extract only the KML file, and add that to the map. But I'd like to try to keep this on the client-side if possible.

Here is an example of a KMZ archive that includes two PNG files (in this case, I'd only want to remove one of them, legend.png):

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    center: {
      lat: 41.876,
      lng: -87.624
    }
  });

}

initMap();

var kmlUrl = 'https://www.weather.gov/source/crh/shapefiles/wwa.kmz';
var kmlOptions = {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map" style="min-width: 800px; min-height: 660px"></div>


Solution

  • Per the documentation there is a KmlOptions property that disables the display of ScreenOverlays:

    screenOverlays
    Type: boolean
    Whether to render the screen overlays. Default true.

    Setting it to true removes that legend.

    screenshot of resulting map

    var map;
    
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        center: {
          lat: 41.876,
          lng: -87.624
        }
      });
    
    }
    
    initMap();
    
    var kmlUrl = 'https://www.weather.gov/source/crh/shapefiles/wwa.kmz';
    var kmlOptions = {
      suppressInfoWindows: true,
      preserveViewport: false,
      map: map,
      screenOverlays: false
    };
    var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      padding: 0px;
      margin: 0px;
    }
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
    <div id="map"></div>