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
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <title>KML Layers example</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map { margin: 0; padding: 0; height: 100%; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/geoxml3.js"></script> <script src="js/ProjectedOverlay.js"></script> <script type="text/javascript"> var map; var geoXml; function initialize() { var mapOptions = { zoom: 12, center: new google.maps.LatLng(-37.68378, 145.01076), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'),mapOptions); var kLayer = new google.maps.KmlLayer({ url: 'https://dl.dropboxusercontent.com/u/1277098/3075.kml' }); kLayer.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map"></div> </body> </html> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<Style id="s1"> <LineStyle> <color>7f0000ff</color> <width>4</width> </LineStyle> <PolyStyle> <color>7f0000ff</color> <colorMode>normal</colorMode> <fill>1</fill> <outline>1</outline> </PolyStyle> </Style> |
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,
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?