Google maps KML polygons

Question

I have successfully imported a kml file to a Google map so that it displays real estate boundaries.

I have also used the tutorial at https://google-developers.appspot.com/maps/documentation/javascript/examples/polygon-arrays to draw simple polygons and have them click-able.

However, I don't know how to make the polygons created by the kml file click-able. The polygons on the kml are quite complex shapes and consist of many coordinates to form the polygons. The example below is just for 1 real estate boundary:

-83.6530304633209,34.8237504877659,0 -83.65536046332301,34.8248804877671,0 -83.65672046332431,34.8262904877683,0 -83.6567504633242,34.8271904877693,0 -83.655330463323,34.8308304877725,0 -83.6565104633242,34.8333304877749,0 -83.65765046332511,34.8349204877764,0 -83.6571104633247,34.8383604877794,0 -83.6591604633265,34.8443604877853,0 -83.6588104633263,34.8468904877875,0 -83.6591604633265,34.8507504877912,0 -83.6583904633258,34.8543804877945,0 -83.6569404633244,34.8566604877968,0 -83.65475046332242,34.8599504877998,0 -83.6545604633223,34.8610404878007,0 -83.6543204633219,34.8635704878032,0 -83.65568046332331,34.8684104878075,0 -83.6553904633231,34.8695004878086,0 -83.6546604633224,34.8706904878097,0 -83.654380463322,34.872050487811,0 -83.6552304633228,34.8745504878134,0 -83.65494046332262,34.8759104878145,0 -83.65377046332161,34.8768304878154,0 -83.6504704633185,34.8796104878179,0 -83.64877046331689,34.8814504878196,0 -83.6469204633151,34.8849204878229,0 -83.6450204633134,34.8870304878249,0 -83.64227046331081,34.8897904878275,0 -83.6389204633076,34.8911304878288,0 -83.6344604633034,34.8921304878297,0 -83.6330604633022,34.8926104878301,0 -83.6295204632988,34.8948504878322,0 -83.6278404632974,34.8969604878341,0 -83.6273304632969,34.89832048783551,0 -83.62726046329681,34.8994904878366,0 -83.6286904632982,34.9030704878399,0 -83.6287304632981,34.9045104878412,0 -83.62844046329791,34.9056004878421,0 -83.6268704632964,34.9077104878443,0 -83.6256904632953,34.9086304878451,0 -83.6240704632939,34.9091204878455,0 -83.6226304632926,34.9088804878452,0 -83.6204304632904,34.9083904878448,0 -83.6179704632882,34.9100604878463,0 -83.61680046328711,34.9109904878471,0 -83.6157204632862,34.9116404878477,0 -83.61126046328189,34.9123704878484,0 -83.610200463281,34.91347048784951,0

These coordinates do not work when i manually convert them into latlng pairs and insert them into the Google tutorial above like so:

new google.maps.LatLng(-83.6530304633209,34.8237504877659),
new google.maps.LatLng(83.65536046332301,34.8248804877671),
new google.maps.LatLng(-83.65672046332431,34.8262904877683),
new google.maps.LatLng(-83.6567504633242,34.8271904877693)

Anyone have any ideas on how I can either make the kml layer polygons click-able or use the kml data to redraw the polygons and make them click-able?

Thanks

edit: This is the code i'm using to load the kml:

<!-- Declare the application as HTML5 using the <!DOCTYPE html> declaration -->
<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <!-- include the Maps API JavaScript using a script tag -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAaWOu7N4OX8BlYUwZhvWP2V0P6YQryN9Y&sensor=true"></script>
    <script type="text/javascript">
    function initialize()
    {
        <!-- create a JavaScript object literal to hold a number of map properties -->
        var myOptions =
        {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            fillColor: '#0000ff'
        };
        <!-- a JavaScript function to create a "map" object -->
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        var myLayer = new google.maps.KmlLayer('http://www.domain.com/gmaps/1.kml',{suppressInfoWindows: true,map: map});
        google.maps.event.addListener
        (
            myLayer,"mouseover",function()
            {
                this.setOptions({fillColor: "#000000"});
            }
        ); 
        google.maps.event.addListener
        (
            myLayer, 'click', function(kmlEvent)
            {
                var text = kmlEvent.featureData.description;
                showInContentWindow(text);
            }
        );

        google.maps.event.addListener
        (
            myLayer,"mouseover",function()
            {
                this.setOptions
                (
                    {
                        fillColor: "#000000"
                    }
                );
            }
        ); 

        function showInContentWindow(text)
        {
            var sidediv = document.getElementById('content_window');
            sidediv.innerHTML = text;
        }
    }
    </script>
</head>
<!-- initialize the map object from the body tag's onload event -->
<body onLoad="initialize()">
    <!-- create a div element named "map_canvas" to hold the Map -->
    <div id="map_canvas" style="width:79%; height:100%; float:left"></div>
    <div id="content_window" style="width:19%; height:100%; float:left"></div>
</body>
</html>

Can you show us the code you've got? Even a sample but fully functional one? KML Polygons that have description elements or BalloonStyle/text should be automatically clickable. — Mano Marks, Jun 12 '12 at 17:27
Blimey that was a quick reply!. I mistakenly said i couldn't get the polygons clickable, i meant to say i couldn't get them to react to mouseover (i.e. change color). I have posted code above in edit. Thanks. — user1156756, Jun 12 '12 at 18:58
You should also edit the question to say mouseover rather than click. Also KML specifies `lng,lat,alt` groups but `LatLng` takes `lat,lng`. Your example has them the wrong way round. — Andrew Leach, Jun 12 '12 at 19:47
Is the option that you are looking for - a way to extract the points from the KML and create something that will offer you the `mouseover` capability? — Sean Mickey, Jun 12 '12 at 19:54

Sean Mickey · Answer 1 · 2012-06-12T19:58:01.370

Unfortunately, you don't get a mouseover event with the KmlLayer^api-doc; check at the api-doc, scroll down a bit to see the Events, and all you get for events are: click, defaultviewport_changed, and status_changed. I have also explored the options that are available because the KmlLayer is an MVCObject^api-doc, but that doesn't offer additional events. I don't think this is possible.

There may be another way to achieve what you want, but I haven't found it; let's see what others may be able to add.

score 1 · Answer 2 · answered Oct 17 '13 at 12:30

Using KmlLayer, you can't change the properties of the Polygons. If you use a third party KML parser like geoxml3 or geoxml-v3 to render the polygons as native Google Maps API v3 objects you can change their properties (but whether the performance is acceptable will depend on how complex your KML is). You can also dynamically change Polygons in tiles rendered using FusionTablesLayer (import your KML into a Fusion Tabel).

Example changing the color of Polygons from KML rendered using geoxml3 on mouseover

Google maps KML polygons

2 Answers2

Linked