BuenosAiresScreen

How to Load KML Files in Google Maps API

KML files, or Keyhole Markup Language, is a geospatial-specific syntax which is used primarily by Google Earth applications and Google Maps. The simplicity of a KML file helps load data onto a web map efficiently. This post helps show the basics of how to setup a KML Google Map template.

First off, you’ll need a KML template file to show GPS coordinates and features to be put onto a map. This KML needs to be online either in a public HTML folder or could be drawn from another sites server.

A simple KML could be like the following:

<?xml version=”1.0″ encoding=”UTF-8″?>
<kml xmlns=”http://www.opengis.net/kml/2.2″ xmlns:atom=”http://www.w3.org/2005/Atom”>
<Document>
<name>
Map of xxx
</name>
<atom:author>
<atom:name>NAME_HERE</atom:name>
</atom:author>
<atom:link rel=”related” href=”mindbodymetrics.com”/>
<Folder>
<Placemark>
<name>
NAME__HERE
</name>
<address>
ADDRESS_HERE
</address>
<description>
DESCRIPTION_HERE
</description>
<Point>
<coordinates>-105.68363890,40.3427932,0</coordinates>
</Point>
</Placemark>
</Folder>
</Document>
</kml>

Multiple placemarkers can be shown on an embedded map as well, use this format:

<?xml version=”1.0″ encoding=”UTF-8″?>
<kml xmlns=”http://www.opengis.net/kml/2.2″ xmlns:atom=”http://www.w3.org/2005/Atom”>
<Document>
<name>
Map of xxx
</name>
<atom:author>
<atom:name>NAME_HERE</atom:name>
</atom:author>
<atom:link rel=”related” href=”mindbodymetrics.com”/>
<Folder>
<Placemark>
<name>
NAME__HERE
</name>
<address>
ADDRESS_HERE
</address>
<description>
DESCRIPTION_HERE
</description>
<Point>
<coordinates>-105.68363890,40.3427932,0</coordinates>
</Point>
</Placemark>                                                                                                                                                                                                                                    <Placemark>
<name>
NAME__HERE
</name>
<address>
ADDRESS_HERE
</address>
<description>
DESCRIPTION_HERE
</description>
<Point>
<coordinates>-105.48363290,40.3827912,0</coordinates>
</Point>
</Placemark>                                                                                                                                                                                                                                  <Placemark>
<name>
NAME__HERE
</name>
<address>
ADDRESS_HERE
</address>
<description>
DESCRIPTION_HERE
</description>
<Point>
<coordinates>-105.7563890,40.127932,0</coordinates>
</Point>
</Placemark>
</Folder>
</Document>
</kml>

For more comprehensive examples into using KML files take a look at Google’s sample page: https://kml-samples.googlecode.com/svn/trunk/interactive/index.html

The Google Maps API template code can be found below, this is necessary to load the map file onto a web page.

Lat and Long for this .HTML file doesn’t need to be modified, since our Lat./Long. information is stored in the .KML files. Simply modify the URL where the KML layer is set to load and this template should load a centered map (this auto-centering also occurs when loading multiple GPS points).

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>
<meta charset=”utf-8″>
<title>KML Layers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}

</style>
<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true”></script>
<script>
function initialize() {
var point = new google.maps.LatLng(35.0,-85.0);
var mapOptions = {
zoom: 11,
center: point,
mapTypeId: google.maps.MapTypeId.HYBRID
}

var map = new google.maps.Map(document.getElementById(‘map-canvas’), mapOptions);

var kmlLayer = new google.maps.KmlLayer({
url: ‘http://mindbodymetrics.com/kml/mbm.kml’
});
kmlLayer.setMap(map);
}

google.maps.event.addDomListener(window, ‘load’, initialize);

</script>
</head>
<body>
<div id=”map-canvas”></div>
</body>
</html>

 

Leave a Reply

Your email address will not be published.