Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Display KML data

  • This tutorial demonstrates how to display KML data on a Google Map and in a sidebar, triggered by marker clicks.

  • It guides you through setting up a KML file, creating a KML layer on the map, and capturing click events to populate the sidebar with feature information.

  • The tutorial uses entity replacement within the KML to customize the displayed information in the sidebar using ExtendedData elements.

  • It provides detailed code examples and explanations for each step, enabling you to create an interactive map with a dynamic sidebar.

  • You can find additional resources and documentation on using KML files with Google Maps for further exploration.

Overview

This tutorial shows you how to display information of a KML file in a Googlemap and sidebar. For more information on using KML files in maps,read theguide to KML Layers.Try clicking a marker on the map below to see data in the sidebar.

The section below displays the entire code you need to create the map andsidebar.

var map;var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';function initMap() {  map = new google.maps.Map(document.getElementById('map'), {    center: new google.maps.LatLng(-19.257753, 146.823688),    zoom: 2,    mapTypeId: 'terrain'  });  var kmlLayer = new google.maps.KmlLayer(src, {    suppressInfoWindows: true,    preserveViewport: false,    map: map  });  kmlLayer.addListener('click', function(event) {    var content = event.featureData.infoWindowHtml;    var testimonial = document.getElementById('capture');    testimonial.innerHTML = content;  });}
<div id="map"></div><div id="capture"></div>
html, body {  height: 370px;  padding: 0;  margin: 0;  }#map { height: 360px; width: 300px; overflow: hidden; float: left; border: thin solid #333; }#capture { height: 360px; width: 480px; overflow: hidden; float: left; background-color: #ECECFB; border: thin solid #333; border-left: none; }
<!-- Replace the value of the key parameter with your own API key. --><script asyncsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

Try it yourself

You can experiment with this code in JSFiddle by clicking the<> icon in the top-right corner of the code window.

<!DOCTYPE html><html>  <head>    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">    <meta charset="utf-8">    <title>KML Click Capture Sample</title>    <style>      html, body {        height: 370px;        padding: 0;        margin: 0;        }      #map {       height: 360px;       width: 300px;       overflow: hidden;       float: left;       border: thin solid #333;       }      #capture {       height: 360px;       width: 480px;       overflow: hidden;       float: left;       background-color: #ECECFB;       border: thin solid #333;       border-left: none;       }    </style>  </head>  <body>    <div></div>    <div></div>    <script>      var map;      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';      function initMap() {        map = new google.maps.Map(document.getElementById('map'), {          center: new google.maps.LatLng(-19.257753, 146.823688),          zoom: 2,          mapTypeId: 'terrain'        });        var kmlLayer = new google.maps.KmlLayer(src, {          suppressInfoWindows: true,          preserveViewport: false,          map: map        });        kmlLayer.addListener('click', function(event) {          var content = event.featureData.infoWindowHtml;          var testimonial = document.getElementById('capture');          testimonial.innerHTML = content;        });      }    </script>    <script async    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">    </script>  </body></html>

Getting Started

These are the stages to creating the map and sidebar for this tutorial:

  1. Setting up the KML file
  2. Displaying the KMLlayer
  3. Displaying data in the sidebar

Setting up the KML file for import

Your KML file should conform to the KML standard. For details about thisstandard, refer theOpen Geospatial Consortiumwebsite.Google's KML documentation also describes thelanguage, and offers both a reference and conceptual developer documentation.

If you're just learning and don't have a KML file, you can:

  • Use the following KML file for this tutorial:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • Find a KML file on the web. You can use Google'sfiletype search operator.

    Substitute any search term forvelodromes, or omit theterm altogether to find all KML files.

If you're creating your own file, the code in this example assumes that:

  • You have publicly hosted the file on the internet. This is a requirement forall applications that load KML into aKMLLayer, so that Google's servers canfind and retrieve the content to display it on the map.
  • The file is not on a password-protected page.
  • Your features have info window content. You can contain this content inadescription element, orinclude it using anExtendedData elementandentity replacement (read below for more info). Both are accessibleas the feature'sinfoWindowHtml property.

ExtendedData elements

The KML file in this tutorial includes feature information in anExtendedData element. In order to bring this information into the feature'sdescription, useentity replacement, which is essentially a variablein theBalloonStyle tag.

The table below explains the code for this section.

Code and description
<Styleid="west_campus_style"><IconStyle><Icon><href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href></Icon></IconStyle><BalloonStyle><text>$[video]</text></BalloonStyle></Style>

The KML file has a singleStyle element that is applied to allthe placemarks.
ThisStyle element assigns a value of#[video] to theBalloonStyle's text element.
The$[x] format tells the KML parser to look for aData element namedvideo, and to use it as theballoon text.
<Placemark><name>GoogleWestCampus1</name><styleUrl>#west_campus_style</styleUrl><ExtendedData><Dataname="video"><value><![CDATA[<iframewidth="640"height="360"src="https://www.youtube.com/embed/ZE8ODPL2VPI"frameborder="0"allowfullscreen></iframe><br><br>]]></value></Data></ExtendedData><Point><coordinates>-122.0914977709329,37.42390182131783,0</coordinates></Point></Placemark>

EachPlacemark contains anExtendedDataelement, which holds theData element.Notice that eachPlacemark has a singleData elementwith a name attribute ofvideo.
The file for this tutorial uses the embedded YouTube video as the valueof each Placemark's balloon text.

You can learn more about entity replacement in theAdding Custom Data chapter of the KMLdocumentation.

Displaying the KMLLayer

Initializing the map

This table explains the code for this section.

Code and description
functioninitMap(){map=newgoogle.maps.Map(document.getElementById('map'),{center:newgoogle.maps.LatLng(-19.257753,146.823688),zoom:2,mapTypeId:'terrain'});}

To display KML on a map, you need to first create the map.
This code creates a new Google Map object, tells it where to center and zoom,and attaches the map to thediv.
To learn more about the basics of creating a Google Map, read theAdding a Google Map to your websitetutorial.

Creating the KMLLayer

This table explains the code that creates a KMLLayer.

Code and description
varkmlLayer=newgoogle.maps.KmlLayer();

Creates a new KMLLayer object to display your KML.
varsrc='https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';varkmlLayer=newgoogle.maps.KmlLayer(src,{suppressInfoWindows:true,preserveViewport:false,map:map});

The KMLLayer constructor sets the URL of your KML file. It also definesproperties for the KMLLayer object that do the following:
  • Tells the layer not to display an info window when clicked.
  • Tells the map to center and zoom to the bounding box of the layer'scontents.
  • Sets the map to the Map object created earlier.
TheMaps JavaScript API reference guide lists all available options for this layer.
Load your HTML file to display the KML file content as a layer on top of thebase map. However, clicking any feature won't result in any action yet.

Displaying data in the sidebar

This section explains the settings that displays info window content inthe sidebar when you click a feature on the map. This is done by:

  • Listening for a click event on any of the KMLLayer's features.
  • Grabbing the clicked feature's data.
  • Writing that data to the sidebar.

Adding an event listener

Google Maps provides a function to listen and respond to user events on themap, such as clicks or keyboard keypresses. It adds a listener for suchclick events.

The table below explains the code for this section.

Code and description
kmlLayer.addListener('click',function(event){});

ThekmlLayer.addListener event listener focuses on thefollowing:
  • The type of event to listen for. In this tutorial, it is theclick event.
  • A function to call when the event occurs.
You can learn more about events in theDeveloper's Guide.

Writing the KML feature data to the sidebar

By this stage of the tutorial, you have captured click events on the layer'sfeatures. You can now set the application to write the feature's data andinfo window content to the sidebar.

The table below explains the code for this section.

Code and description
varcontent=event.featureData.infoWindowHtml;

Writes the info window content to a variable.
vartestimonial=document.getElementById('capture');testimonial.innerHTML=content;

Identifies thediv to write to, and replaces the HTML in itwith the feature's content.
kmlLayer.addListener('click',function(event){varcontent=event.featureData.infoWindowHtml;vartestimonial=document.getElementById('capture');testimonial.innerHTML=content;});

These lines of code become the function within theaddListenerconstructor.

Now each time you click a KML feature on the map, the sidebar updates to display itsinfo window content.

More information

Read more about usingKML files.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-11-21 UTC.