[GIS] Google maps kml and polygon eventclick error

google mapsjavascriptkml

I have a google map polygon kml file that I am loading on a google map. When I click on the polygon, I draw a line from that polygon to places on the map. To do this I am using the code:

//Add KML layer
var fregLayer = new G.KmlLayer(
      'http://dl.dropbox.com/freg4.kml',
      {  suppressInfoWindows: true, 
         map: map
    });

 // Add listener to kml layer
 google.maps.event.addListener(fregLayer, 'click', function(kmlEvent) {


//parse click event
var text = kmlEvent.featureData.name;

//make polylines using my function 'make'
 make(text);   

   });

However, after clicking a polygon the kml layer looses 'focus' and I can no longer click any other polygons to generate other lines. Reading about this problem, it is suggested to make your polyline not clickable which I tried using clickable:false in the options. I also tried google.maps.kmlEvent.stopPropagation();
however neither of this options solved the problem.

## Entire Program ##

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<style>
html,body {
    margin: 0px;
    width: 100%;
    height: 100%;
}
</style>

<title>Connectivity</title>

<!-- External js -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<!-- Local js -->
<script src="http://dl.dropbox.com/u/169746/latlong.js"></script>
<script type="text/javascript">


var G = google.maps;    // Shortened
var zoom = 9;
var centerPoint = getCoordinates(5);
var container;
var sliderValue = 100;
var map;
var markersArray = [];
var line = [];

// Read coordinates from Lat/Long *.js file
function getCoordinates(x){
    var LatLng = new google.maps.LatLng(identifier[x][2], identifier[x][1]);    
    return LatLng;
}

// relate click events to polygons
function attachMessage(marker, number) {            
        google.maps.event.addListener(marker, 'click', function(){  make(number) } );   
}

//makes connections from the chosen polygon, to all other polygons
function make(index){

    // clear all other overlays and delete
    clearOverlays()
    deleteOverlays()

        // loop through array index 
        for (var i = 0; i < connections[index].length; i++) {
        makeConnections(index, i, i, connections[index][i]);        
        }
}


//makes a connection between two polygons
function makeConnections(a,b,lineIndex, opacity){ 

        // get points
        var points = [
            getCoordinates(a),
            getCoordinates(b)
            ]

        opacity = Math.log(opacity)/18      

        //make line
        line[lineIndex] = new google.maps.Polyline({
          path: points,
          map: map,          
          strokeColor: "#FF0000",
          strokeWeight: 1,
          strokeOpacity:opacity
        });                 

 }


 // Removes the polylines from the map
 function clearOverlays() {

    for (i in line) {
        line[i].setMap(null);
      } 
}

 // Shows any overlays currently in the array
 function showOverlays(){
    for (i in line) {
        line[i].setMap(map);
    }
 }  


// Delete all overlays
function deleteOverlays() {
  if (line) {
    for (i in line) {
      line[i].setMap(null);
    }
    line.length = 0;
  }
}


function load() {

    container = document.getElementById('mapDiv');

    var myOptions = {
        zoom: zoom,
        center: centerPoint,
        mapTypeId: G.MapTypeId.ROADMAP
    }

    map = new G.Map(container, myOptions);  

    //Add KML layer
    var fregLayer = new G.KmlLayer(
      'http://dl.dropbox.com/u/169746/freg4.kml',
      {  suppressInfoWindows: true, 
         map: map
          });


    // Add listener to kml layer
    G.event.addListener(fregLayer, 'click', function(kmlEvent) {
    //clearOverlays()
    var text = kmlEvent.featureData.name;

    //get index of string 
    text = 'X' + text   
    var index = ID.indexOf(text);   

    //Pass index to function to make links
    make(index);    
    //G.kmlEvent.stopPropagation();  

    //alert(G.kmlEvent.getCurrentTarget());

    });

}

window.onload = load;

</script>
</head>
<body >
<center>
<table cellspacing="0" cellpadding="2">
<tr>
    <td valign="top">
        <div id="top" style="width: 800px; height: 30px;"></div>
    </td>
</tr>
<tr>
    <td valign="top">
        <div id="mapDiv" style="width: 800px; height: 450px;"></div>
    </td>
</tr>
</table>
</center>
</body>
</html>

Best Answer

Have you tried removing the listener (removeListener) from the layer?

It also appears that the clickable: false option was not working correctly and was a bug in the API:

http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/6e4c134059159e75

It is referred to on the Google API v3 changes page http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog - "Clicking on a KML overlay no longer fires a map click event"

As noted above changing the z-index of the line layer (I tried in FireBug) to -1 allows you to continue clicking on the map, however the lines are only semi-visible throughthe polygon layer.

alt text

Related Question