KML Layer Example

by Alex Azuero

HTML

<html>
<head>
<title>Google Maps API v3 : KML Layer</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
    <!--Copy the Javascript code here. -->
</script>
</head>
<body onload="initialize()">
<div id="map" style="width:300px; height:400px; float:left">
</div>
<div id="content_window" style="width:100px; height:400px; float:right">
</div>
</body>
</html>

JavaScript

function initialize()
{
    var map = new google.maps.Map(document.getElementById("map"),
    {
        center: new google.maps.LatLng(22.7964,73.8456),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });
    var kmlLayer = new google.maps.KmlLayer('http://world.wildlife.adventures.googlepages.com/wildlife-national-parks-india.kml',
    {
        suppressInfoWindows: true,
        map: map
    });
    google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent)
    {
        var text = kmlEvent.featureData.description;
        showInContentWindow(text);
    });
    function showInContentWindow(text)
    {
        var sidediv = document.getElementById('content_window');
        sidediv.innerHTML = text;
    }
}