Search code examples
javascriptkmlarcgisinfowindow

How to control the content of a Google Maps info window on a KmlLayer?

I have a KML layer on a google map which contains a number of polygons. When each polygon is clicked, the data from the attributes table is shown using a default google maps info window. Here is the code:

google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Is it possible to show only some of the attribute data and not every column in the info window? It is currently showing all of the data behind the polygon. Here is an image of the info window as well, so for example I would like to just show the 'Name' 'Borough' and 'KM2' data in the info window:

enter image description here

Solution

  • One option would be to use the suppressInfoWindows:true kmlOption, then create your own infowindow with whatever content you want in it.

    The KmlLayer click event contains the KmlFeatureData from the KML, which you can parse to customize the information displayed.

    KmlFeatureData object specification

    Data for a single KML feature in JSON format, returned when a KML feature is clicked. The data contained in this object mirrors that associated with the feature in the KML or GeoRSS markup in which it is declared.

    Properties

    • author Type: KmlAuthor

    The feature's <atom:author>, extracted from the layer markup (if specified).

    • description Type: string

    The feature's <description>, extracted from the layer markup.

    • id Type: string

    The feature's <id>, extracted from the layer markup. If no has been specified, a unique ID will be generated for this feature.

    • infoWindowHtml Type: string

    The feature's balloon styled text, if set.

    • name Type: string

    The feature's <name>, extracted from the layer markup.

    • snippet Type: string

    The feature's <Snippet>, extracted from the layer markup.

    code snippet:

    function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var kmllayer = new google.maps.KmlLayer({
    map: map,
    url: "http://www.geocodezip.com/geoxml3_test/us_states.xml",
    suppressInfoWindows: true
  });
  var infowindow = new google.maps.InfoWindow();
  google.maps.event.addListener(kmllayer, 'click', function(evt) {
    infowindow.setContent(evt.featureData.name);
    infowindow.setPosition(evt.latLng);
    infowindow.open(map);
  })

}
google.maps.event.addDomListener(window, "load", initialize);
    html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>