Google V3 Add click Listner

Question

I am new to JavaScript, i want to migrate from Google V2 to Google v3, for this i am just changing methods which are used in V2 slightly all are working but when i am trying to change the addListener from V2 to V3 i am facing problems like in v2 same listener is used to put the marker on the map but when it comes to V3 i am not able to put a marker on the map.Here i am posting v2 code and V3 code.Please help me to over come the problem. V2 is :

GEvent.addListener(map, "click", function(marker, point) {
                console.debug('after Click map is '+map+' marker is '+marker+' point is '+point);
                if (marker) {
                        if(PolygonMarkers.length == 1){ //Only one marker in the array
                            map.removeOverlay(PolygonMarkers[0]);
                            map.removeOverlay(PolygonMarkers[0]);
                            PolygonMarkers = [];
                            if(Polygon){map.removeOverlay(Polygon)};
                        } else{                     /*More then one marker*/
                            var RemoveIndex = -1;
                            var Remove;
                            //Search for clicked Marker in PolygonMarkers Array
                            for(var m=0; m<PolygonMarkers.length; m++)
                            {
                                if(PolygonMarkers[m].getPoint().equals(marker.getPoint()))
                                {
                                    RemoveIndex = m; Remove = PolygonMarkers[m];
                                    break;
                                }
                            }
                            //Shift Array elements to left
                            for(var n=RemoveIndex; n<PolygonMarkers.length-1; n++)
                            {
                                PolygonMarkers[n] = PolygonMarkers[n+1];
                            }
                            PolygonMarkers.length = PolygonMarkers.length-1 //Decrease Array length by 1
                            map.removeOverlay(Remove); //Remove Marker
                            geofencedetails.drawPolygon(); //Redraw Polygon
                          }  

                        allMarkers = PolygonMarkers;

                  } else {
                    // Adds a new Polygon boundary marker 
                        var markerOptions = { icon: icon, draggable: true };
                        var marker = new GMarker(point, markerOptions);
                        PolygonMarkers.push(marker); //Add marker to PolygonMarkers array
                        map.addOverlay(marker); //Add marker on the map
                        GEvent.addListener(marker,'dragstart',function(){ //Add drag start event
                            marker.setImage(icon.image);
                            polygon_resizing = true;
                        });
                        GEvent.addListener(marker,'drag',function(){ 
                            geofencedetails.drawPolygon(); 
                            }); //Add drag event
                        GEvent.addListener(marker,'dragend',function(){   //Add drag end event
                            marker.setImage(icon.image);
                            polygon_resizing = false;
                            geofencedetails.drawPolygon();
                        });
                        geofencedetails.drawPolygon();

                        allMarkers = PolygonMarkers;
                 }
                });`

and V3 is

        google.maps.event.addListener(map, "click", function(marker, point) {
            if (marker) {
                //console.debug('marker '+marker.toSource());
                if(PolygonMarkers.length == 1){ //Only one marker in the array
                    map.removeOverlay(PolygonMarkers[0]);
                map.removeOverlay(PolygonMarkers[0]);
                PolygonMarkers = [];
                if(Polygon){
                    map.removeOverlay(Polygon)
                };
                }else {                     /*More then one marker*/
                    //console.debug('PolygonMarkers.length is '+PolygonMarkers.length);
                    var RemoveIndex = -1;
                    var Remove;
                    //Search for clicked Marker in PolygonMarkers Array
                    for(var m=0; m<PolygonMarkers.length; m++){
                        //console.debug('PolygonMarkers['+m+'] '+PolygonMarkers[m]);
                        if(PolygonMarkers[m].getPosition().equals(marker.getPosition())){
                            //console.debug('Both are equal ');
                            RemoveIndex = m;
                            Remove = PolygonMarkers[m];
                            break;
                        }
                    }
                    //Shift Array elements to left
                    for(var n=RemoveIndex; n<PolygonMarkers.length-1; n++){
                        PolygonMarkers[n] = PolygonMarkers[n+1];
                    }
                    PolygonMarkers.length = PolygonMarkers.length-1 //Decrease Array length by 1
                    /*map.removeOverlay(Remove); //Remove Marker*/
                    for (var i = 0; i < allMarkers.length; i++ ) {
                        allMarkers[i].setMap(null);
                    }
                    geofencedetails.drawPolygon(); //Redraw Polygon
                }  

                allMarkers = PolygonMarkers;

            } else {
                //console.debug('In else block');
                // Adds a new Polygon boundary marker 
                var markerOptions = { icon: icon, draggable: true };
                //console.debug('1');
                var marker = new GMarker(point, markerOptions);
                //console.debug('2');
                PolygonMarkers.push(marker); //Add marker to PolygonMarkers array
                //console.debug('3');
                map.addOverlay(marker); //Add marker on the map
                //console.debug('4');
                GEvent.addListener(marker,'dragstart',function(){ //Add drag start event
                    //console.debug('5');
                marker.setImage(icon.image);
                //console.debug('6');
                polygon_resizing = true;
                });
                GEvent.addListener(marker,'drag',function(){ 
                    geofencedetails.drawPolygon(); 
                }); //Add drag event
                GEvent.addListener(marker,'dragend',function(){   //Add drag end event
                    marker.setImage(icon.image);
                polygon_resizing = false;
                geofencedetails.drawPolygon();
                });
                geofencedetails.drawPolygon();

                allMarkers = PolygonMarkers;
            }
        });

Answer 1

You need to bind the click event to the marker instead of the map.

google.maps.event.addListener(marker, "click", function(event) { .... } );

UI events within the Google Maps API V3 typically pass an event argument, which can be accessed by the event listener, noting the UI state when the event occurred. For example, a UI 'click' event typically passes a MouseEvent containing a latLng property denoting the clicked location on the map. Note that this behavior is unique to UI events; MVC state changes do not pass arguments in their events.