title: Google maps KML polygons
body: <p>I have successfully imported a kml file to a Google map so that it displays real estate boundaries. </p>
  
  <p>I have also used the tutorial at <a href="https://google-developers.appspot.com/maps/documentation/javascript/examples/polygon-arrays" rel="nofollow">https://google-developers.appspot.com/maps/documentation/javascript/examples/polygon-arrays</a> to draw simple polygons and have them click-able. </p>
  
  <p>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:</p>
  
  <pre><code>-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
  </code></pre>
  
  <p>These coordinates do not work when i manually convert them into latlng pairs and insert them into the Google tutorial above like so:</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanks</p>
  
  <p><strong>edit:</strong> This is the code i'm using to load the kml:</p>
  
  <pre><code>&lt;!-- Declare the application as HTML5 using the &lt;!DOCTYPE html&gt; declaration --&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
      &lt;style type="text/css"&gt;
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
      &lt;/style&gt;
      &lt;!-- include the Maps API JavaScript using a script tag --&gt;
      &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAaWOu7N4OX8BlYUwZhvWP2V0P6YQryN9Y&amp;sensor=true"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      function initialize()
      {
          &lt;!-- create a JavaScript object literal to hold a number of map properties --&gt;
          var myOptions =
          {
              center: new google.maps.LatLng(-34.397, 150.644),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              fillColor: '#0000ff'
          };
          &lt;!-- a JavaScript function to create a "map" object --&gt;
          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;
          }
      }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;!-- initialize the map object from the body tag's onload event --&gt;
  &lt;body onLoad="initialize()"&gt;
      &lt;!-- create a div element named "map_canvas" to hold the Map --&gt;
      &lt;div id="map_canvas" style="width:79%; height:100%; float:left"&gt;&lt;/div&gt;
      &lt;div id="content_window" style="width:19%; height:100%; float:left"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>