Display KML on Google Maps

KML on Google Maps

KML is often associated with Google Earth. Did you know Google Maps can display KML as well? A working example of how to display KML on Google Maps is available.

HTML of the page that will display KML

Let’s look at some code. HTML page first:

The HTML page is rather simple and typical. Some CSS, some Javascript and some HTML. It is important to know that the Javascript code that does the core work is show-kml-example.js and can be downloaded for your use from https://github.com/zedfoxus/google-maps-demo, where the entire example is placed under show-kml directory.

Javascript to show KML on Google Maps

Javascript code is shown below:

The important part of code sits in function showKML(). This function creates a new KmlLayer using Google Maps API and uses uri property. Always set the uri to the full URL. Google must be able to locate this URL. Specifying localhost or relative path will not work.