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:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Show KML on Google Maps</title>
    <style>
        img { 
            max-width: 100%; 
        }
        #map-canvas img { 
            max-width: none; 
        }
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing,geometry"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="show-kml-example.js"></script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

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:

    /*
    This Javascript file shows KML on google maps
    */

    // declare variables that will be used in this example
    var myMap;                  // holds the map object drawn on the 
    var myField;                // holds the KML object
    var centerpoint;            // center point of the map

    /**
     * Initialization function that sets up the map
     */
    function initialize() {
        // build the map's center poiint
        centerpoint = new google.maps.LatLng(45.00495,-90.00052);

        // assign map the options of zoom, center point and set the map to
        // SATELLITE
        var mapOptions = {
            zoom: 16, 
            center: centerpoint, 
            mapTypeId: google.maps.MapTypeId.SATELLITE
        };

        // on our web page should be a <div> or <p> tag with id map-canvas
        // show the map in that element with the options listed above
        myMap = new google.maps.Map(
            document.getElementById('map-canvas'), 
            mapOptions
        );

        // show KML
        showKML();
    }

    function showKML()
    {
        myField = new Array();
        myField[0] = new google.maps.KmlLayer({
            url: 'http://zedfox.us/projects/google-maps-demo/show-kml/example.kml'
        });
        myField[0].setMap(myMap);
    }

    $(document).ready(function() {
        initialize();
    });

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.