Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

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.

Data-driven styling for datasets

You can upload your KML data as a dataset and use data-driven styling to display it on the map. This approach offers better performance and more styling options.

To get started with datasets, read the Datasets Overview.

Third-party libraries

You can also use third-party libraries to parse KML files in the browser and display the data using the Maps JavaScript API's Data layer or other overlays.

Popular third-party libraries for parsing KML include:

Once you have converted the KML data to GeoJSON, you can load it into the Data layer using map.data.addGeoJson().

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

Last updated 2026年09月01日 UTC.