Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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>
share|improve this question
    
To clarify, this problem seems to be a google maps javascript error (or at least something that can't be done AFAIK) –  djq Nov 6 '10 at 18:29
    
Do you have a sample page so we can test something live or try to reproduce the problem ourselves? –  Jason Nov 8 '10 at 18:19
    
I added the entire program that I had here - it references two external files via dropbox; a KML overlay and a .js file called latlong.js which contains the coordinates for polyline generation. Sorry it is so long - I tried to trim away anything irrelevant. –  djq Nov 10 '10 at 23:14
add comment

4 Answers 4

up vote 1 down vote accepted

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

share|improve this answer
    
I tried removing the listener a few different ways, but the problem is that I need to a listener to remain with the kml file so it detects for each new click. –  djq Nov 6 '10 at 18:32
add comment

How about adding the polyline before you add your kml layer? I modified one of the google examples to do what I think you're describing (but with lines in the .kml instead of polygons). Try this:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var globals = {};
  function initialize() {
    // create the map
    var chicago = new google.maps.LatLng(41.875696,-87.624207);
    var myOptions = {
      zoom: 11,
      center: chicago,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    globals.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // create the polyline over lay first so it doesn't block the kml layer click events
    var polyOptions = {
      clickable: false,
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    }
    globals.poly = new google.maps.Polyline(polyOptions);
    globals.poly.setMap(globals.map);

    // add the kml layer
    globals.ctaLayer = new google.maps.KmlLayer('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml');
    globals.ctaLayer.setMap(globals.map);
    // listen for clicks on the kml layer
    globals.kml_listener = connect_listener(); 
    console.log('end of init');
  }

  function create_line(feature_name, firstPoint) {
    console.log('create line: ', feature_name);
    globals.poly.setPath(new google.maps.MVCArray());
    var path = globals.poly.getPath();
    path.push(firstPoint);

    // Add a listener for the click event
    globals.map_listener = google.maps.event.addListener(globals.map, 'click', addLatLng);
    console.log('connected map listener');
  }

  function addLatLng(event) {
    google.maps.event.removeListener(globals.map_listener);
    console.log('disconnected map listener');

    var path = globals.poly.getPath();
    path.push(event.latLng);

    // after adding our point to the path, reconnect the event listener
    globals.kml_listener = connect_listener();
  }

  function connect_listener() {
    return google.maps.event.addListener(globals.ctaLayer, 'click', kml_click_handler);
  }

  function kml_click_handler(kmlEvent) {
    console.log('kml click handler', kmlEvent);
    // remove event listener on the kml layer
    google.maps.event.removeListener(globals.kml_listener);
    var text = kmlEvent.featureData.name;
    create_line(text, kmlEvent.latLng);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>
share|improve this answer
    
I don't think this will work as I am trying to get an argument from the kml polygon, which tells the 'make()' function which polylines to draw. For example if I click on polygon1 (p1), a line is drawn from p1->p2. p1->p3, p1->p4. Similarly if I click on p3, lines are generated to the associated boxes. This works the first time around, but after that the polygons are no longer clickable. –  djq Nov 10 '10 at 14:38
    
Ah, OK. More info is always good. While all of my code is probably not applicable, the idea of adding your polyline before you add your kml should still be relevant. Can you give that a shot? Also maybe post a more complete code snippet? –  Derek Swingley Nov 10 '10 at 15:13
    
I just added the entire block of code. It's a little long, but perhaps the problem is more apparent. –  djq Nov 10 '10 at 23:14
    
Thanks, that makes the problem much more clear. What do you want to happen when a user clicks once all the lines are present? Do you want the current lines removed and new ones to be drawn? –  Derek Swingley Nov 11 '10 at 15:56
    
yes, exactly. so clicking on a new polygon causes that to occur. –  djq Nov 12 '10 at 20:31
add comment

Maybe try setting the zIndex of the polyline in PolylineOptions to some high number.

share|improve this answer
add comment

the Bug was fixed try with this code

         function initialize() {
            geocoder = new google.maps.Geocoder();       
            var latlng = new google.maps.LatLng(4.672738,-74.081669);
            var myOptions = {
                zoom: 12,
                center: latlng,
                draggableCursor:'crosshair',
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var myLayerOptions ={
                preserveViewport: true,
                suppressInfoWindows: true,
                clickable: false
            };

            var Layer1 = new google.maps.KmlLayer('http://www.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=217143284309487038939.0004b269c55cbc3a4b5fe&output=kml',myLayerOptions);
            Layer1.setMap(map);


            var polyOptions = {
                strokeColor: '#000000',
                strokeOpacity: 1.0,
                strokeWeight: 3
            }
            poly = new google.maps.Polyline(polyOptions);
            poly.setMap(map);
            google.maps.event.addListener(map, 'click', addLatLng);               
        }
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.