KML Layers- How to Harness the Power of Google Maps

Have you ever wanted to add a special layer to a Google map that identifies certain features?  Features like hiking trails, county lines, special event areas, or even customer location data?  This can easily be done by using a KML layer.  KML stands for Keyhole Markup Language and can be used to create custom overlays on Google Maps.

I was asked to create an overlay of the Counties in Michigan for a customer of ours who wanted to query data and display it on a map.  I found information about KML and Fusion Tables online, but in the end decided that KML tables looked like the easiest (most cost effective) solution to get this up and working for the customer.  The idea is to create a file with the necessary geometry in it and place it in a location that is publicly available. Google Maps can then import it and use it to generate an overlay.

I began by searching for the data I needed and found it in a table online that was taken from data originally created by the U.S. Census Bureau.  This data defined the polygons that make up the county borders in Michigan.  While our customer’s target market is Michigan, the same logic can be applied anywhere, as long as you can obtain a table with the required information.  All I needed now was to put this together to make a KML file.  Since polygons are geometric objects, I needed a Placemark object to contain each one.  Looking at samples of KML data online and the documentation on Google’s website, I created a KML file that looked like this:

<?xml version=”1.0″ encoding=”UTF-8″?>

<kml xmlns=”http://earth.google.com/kml/2.1″>

<Document>

                <name>michiganCounties.kml</name>

                <open>1</open>

                <Folder>

                                <name>mi</name>

                                <Placemark>

                                                <name>Alcona County</name>

                                                <Style>

                                                                <LineStyle>

                                                                                <width>1</width>

                                                                </LineStyle>

                                                                <PolyStyle>

                                                                                <fill>1</fill>

                                                                                <outline>1</outline>

                                                                </PolyStyle>

                                                </Style>

                                                <Polygon>

                                                                <outerBoundaryIs>

                                                                                <LinearRing>

                                                                                                <coordinates>

                                                // geospatial coordinates for points that define the polygon go here

                                                                                                </coordinates>

                                                                                </LinearRing>

                                                                </outerBoundaryIs>

                                                </Polygon>

                                </Placemark>

                </Folder>

</Document>

</kml>

I created a Placemark with polygon definitions for each county inside the folder element.  This created the basic data I needed.  To render this on a Google map I simply needed to add the following line to the javascript on the web page:

var kmllayer = new google.maps.KmlLayer(‘http://url.to.publicly.hosted.file’, {map:map});

Where “http://url.to.publicly.hosted.file” is the full address to a KML file that is hosted publicly.  This is necessary since the Google API will need to retrieve this file and create a layer from the data in it.  {map:map} designates the name of the map object I had created.

The few things I found out as I worked through this are the following:

I also want to share a few lessons learned, in an effort to reduce frustration if you choose to tackle a project like this.

Google caches these KML files for a long time, so if you make a change to the file and then refresh your test page to see the effects that your changes made, you most likely will not see any resulting impact.  There is a way to specify that the KML file will expire.  Check the documentation on the Google website for this.

Here is a link to Googles documentation for KML.  https://developers.google.com/kml/documentation/

The other alternative to get an immediate result is to change the name of the KML file so that it will need to be retrieved again.

Using fill on a polygon automatically sets up a click event on the polygon that displays the name associated with its Placemark.  To avoid this, there are two options.

First you can use the option “suppressInfoWindows : true” to suppress displaying the information.  Specifying that would look like this:

var kmllayer = new google.maps.KmlLayer(‘http://url.to.publicly.hosted.file’, {suppressInfoWindows:true, map:map});

 This will not, however, eliminate the onclick event from being attached to the polygon.  In my case, I needed to be able to draw polygons on the map which required clicking at various locations to create points for the vertices.  Using <fill>0</fill> to prevent filling the polygon resolved this.  When the polygons in the KML layer are filled, the entire area of the polygon becomes clickable.  When the polygons are not filled only the border lines are clickable.

When this layer is displayed, the viewing window is automatically resized to contain the Placemarks in the layer.  This was also unwanted for my application since I wanted to preserve the zoom setting and only show the county borders that fell within that area of the map that was visible.  This was accomplished by using the option to “preserveViewport” which was specified as follows:

var kmllayer = new google.maps.KmlLayer(‘http://url.to.publicly.hosted.file’, {preserveViewport:true, suppressInfoWindows:true, map:map});

Pulling all of this together allowed me to create an overlay for Michigan that depicted the county borders and still allow a user to draw a polygon on the map and then perform a search to locate places like hospitals, churches, schools, and even dog parks within the confines of the user drawn polygon. 

Adding the KML layer allowed the users to accurately draw their polygons to conform with, or remain within a given county by making the borders of the county visible to them on the map. (Note: County lines are not showing up on this map)

Our customer’s business has made the transition from providing data to a team of sales professionals, to a business that offers tools that make the buying journey simple and efficient for the end consumer.  In this case the consumer is making a very large, extremely personal investment, and we have been blessed to be a part of our customer’s transformation.

Please feel free to leave a comment below if you have a question.  We would be happy to help.  If you like what you see, and want to chat about professional Application Development services, send us an email.