in Academic, Coding

Visualizing KML files in Google Maps

The question is easy: How can I visualize the track of a KML file on Google Maps via JavaScript?

Last evening, I spend about four hours looking for a solution for this (pretty trivial) question. In the end, the code was simple and very short, but it was hard to find some good and clear resources about the topic. The documentation from Google about their maps API is very well – but in my opinion it lacks of some simple examples to start with. Therefore, here is a super simple example to copy and past and start right ahead.


Run it

You can just copy and paste the example. You only have to do two things:

  1. Get a KML file, call it test.kml and put it beside your HTML file in a folder.
  2. Start a web-server in that folder (see below).

In order to run the example, you have to start a web-server. Otherwise you can’t load the KML file, since it is not available trough the browser (due to cross origin requests and all that stuff). A very easy way to do that is with python. Just open a command line the folder where your HTML document is and start a server like this:

Then go on http://localhost:8080/ and see your map.


The script is only doing a few simple things. First of all, it initializes a map object using the Google Maps API. This object represents the actual map drawn in the div with the id canvas. Then the script creates a parser object of the geoxml3 library. This library offers a very comfortable way to display KML files on Google Maps. However, the support for polylines (tracks on the map) is pretty new. So you have to use the poly branch of library. Otherwise you won’t see any lines, just your starting point. The library can also parse KML as a pure string. Check their wiki for more information.


Best regards,
Thomas Uhrig

Leave a Reply for hvdboo Cancel Reply

Write a Comment


    • As far as I know, there’s no key required for this example. However, this post is about 4 years old, so maybe something changed.

      But what kind of error do you get?

      • I managed to have it running, but I does not understand the Google map attributes such as zoom, center, etc.
        The initial view is a strip of earths maps (5 or 6), not at all centered or zoomed as set in the ‘options’

  1. Sorry to bother you, but I’m so close to where I want to be, except for the zoom level. My map has well read the kml, but at first sight I’m seeing the world 5 or 6 times, and have to zoom heavily to be a the appropriate level.

    As if the zoom parameter was ignored.

    The code:

    function initialize() {

    var options = {
    zoom: 5,
    center: new google.maps.LatLng(41.876, 2.624),
    mapTypeId: google.maps.MapTypeId.SATTELITE

    var map = new google.maps.Map(document.getElementById(“canvas”), options);
    var parser = new geoXML3.parser({map: map, processStyles: true});


    • I think the problem is, that the KML-file has set a zoom itself. Try the following:

      Then the zoom: 5 from your options should be used (instead of the one of the KML file).

      Let me know if it works.