Google Maps How to do a KML Layer overlay fill

Hi Guys,

Now that I am experimenting with Google Maps I thinks its about time to write a few articles. This is the first one in the series to follow in coming weeks. This post covers how to draw a KML Layer overlay using Google Maps.

Good thing is that as of version 3 there is no external library is needed to do what we are going to do.

KML that I am going to use can be downloaded from the link provided at the end of this post.

Final result will look like below

Google Maps KML layer in action

Google Maps KML layer in action

Code Snippet

You would have a clue how to use Google Maps API to draw simple maps so I am not going to explain line by line but you can use the code snippet to extend it

 

 

This will produce a nice KML Layer with a polygon created from the coordinates supplied from the KML data.

To change the colors of the line and highlighted area you can change color value under style element values as shown below

 

Remember color property is not your typical HEX color. Its defined as aabbggrr (alpha, blue, green, red)

 

Download Demo KML

You are able to download the KML file from the link below
https://dl.dropboxusercontent.com/u/1277098/3075.kml
That’s about it actually.  Most of the power is in your polygon data and GM API take care of the rest.

I hope this helps

Cheers,

Comments

  1. Hello,

    Thank you for the nice post. However, i have an important issue; can you change the color of the polygon (which is loaded from KML file) dynamically via html or javascript?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.