how to add another event listener after added once..?

Question

Hi all,

I'm new to Javascript and also Maps in Google. my task is :

• to allow user to add marker on the map
• display an info window when the user click on the marker
• display 'Kuala Lumpur City Center' in the info window if the marker pointing to the Kuala Lumpur City Center and 'Unknown location' for other locations.

My problem is I can't even display an info window after the marker is added. Can I add a new event within the same function? the code only works for adding the marker. The code below is after I edited from the google maps:

function MyApplication() {

 this.counter = 0;
 this.map = new GMap2(document.getElementById("map_canvas"));
  this.map.setCenter(new GLatLng(3.145423,101.696883), 13);
  var myEventListener = GEvent.bind(this.map, "click", this, function(overlay, latlng) {
     if (this.counter == 0) {
       if (latlng) {
         this.map.addOverlay(new GMarker(latlng))
         this.counter++;
       } else if (overlay instanceof GMarker) {
          //This code is never executed as the event listener is 
          //removed the second time this event is triggered
        this.removeOverlay(marker)
       }
     } else {
       GEvent.removeListener(myEventListener);
}
}); 

}

function initialize() {
var application = new MyApplication();
}

function createMarker(latlng) {

  var marker = new GMarker(latlng);
  GEvent.addListener(marker,"click", function() {
   marker.openInfoWindowHtml('Petronas Twin Tower');
        });
  return marker;

}

thanks in advance. I've been cracking my head for almost 2 weeks. :( please help me...

Answer 1

Not sure what you are trying to accomplish with the code. I assume that you want the user to only have 1 marker on the map at any 1 time.

I have changed the code to look like this:

map=new GMap2(document.getElementById("googleMap"));
map.setCenter(new GLatLng(3.145423,101.696883),13);

var myEventListener = GEvent.bind(map,"click",this,function(overlay,latlng) {

    // remove any markers from the map each time the user clicks on the map. This makes sure
    // the user can only have 1 marker on the map at any 1 time
    map.clearOverlays();

    var marker = null;

    if(latlng) {
        marker = new GMarker(latlng);
        map.addOverlay(marker);
    } else if(overlay instanceof GMarker) {
        //This code is now executed
        if (marker)
            map.removeOverlay(marker);
    }
});

Why do you need to remove the click event handler on the second click?

The above code doesn't display the baloon on the marker, but at least the marker is now removed when the user clicks on it.

Could you give some more information about what you want to do and the exact behaviour of the code.

Answer 2

Hi..

Thanks for your help. Yes, the user only need one marker at one time. So that, when he clicks on the map, a marker will appear and when he clicks on the marker, an info window will display. The info window will display 'Kuala Lumpur City Center' if the marker is at the exact location otherwise it will display as 'Unknown location'. So, when the info window is close, the marker will disappear and the user can click again on the map to add new marker. Just like what you have done to add marker and remove it. That is what I'm trying to accomplish.

I was thinking if I need to remove the event handler before adding a new click event to display the info window?