Read the documentation or view this example fullscreen.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 37.06, lng: -95.68}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/kml-samples/kml/Placemark/placemark.kml',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
<div id="map"></div> <div id="content-window"></div>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
float: left;
height: 100%;
width: 79%;
}
#content-window {
float: left;
font-family: 'Roboto','sans-serif';
height: 100%;
line-height: 30px;
padding-left: 10px;
width: 19%;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
Try it yourself
Hover at top right of the code block to copy the code or open it in JSFiddle.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Feature Details</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
float: left;
height: 100%;
width: 79%;
}
#content-window {
float: left;
font-family: 'Roboto','sans-serif';
height: 100%;
line-height: 30px;
padding-left: 10px;
width: 19%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="content-window"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 37.06, lng: -95.68}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/kml-samples/kml/Placemark/placemark.kml',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Need help? Visit our