Google Maps API v3: InfoWindow is not in right position

Question

I want the infoWindow to open on the specific marker every time I click on the marker. But every time it stays in the same position where it used to be at the last time. Here's my code

var infowindow = new google.maps.InfoWindow(
    { 
        size: new google.maps.Size(150,20)
    });
    var markersArray = [];
    var countMarker = 0;


    function initialize() {       
        geocoder = new google.maps.Geocoder();
        var myLocation = new google.maps.LatLng(52.13206069538749, -106.63635849952698);
        var mapOptions = {
            zoom: 12,
            center: myLocation,
            mapTypeControl: true,
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map =  new google.maps.Map(document.getElementById("mapCanvas"), mapOptions); 
        google.maps.event.addListener(map, 'click', function(event) {

             addMarker(event.latLng);
             infowindow.setPosition(marker.getPosition());
             infowindow.setContent(event.latLng.toString());

             infowindow.open(map,marker);

             // showing latitude and longitude in infowindow


             if (flag == 1){
                document.getElementById("latbox").value=event.latLng.lat();  
                document.getElementById("lngbox").value=event.latLng.lng();
                flag++;
             }
             else{
                var current_lat = event.latLng.lat().toString();
                var current_lng = event.latLng.lng().toString();
                insRow(current_lat, current_lng, marker.id);
             }
             google.maps.event.addListener(marker, 'click', function() {
                // addMarker(event.latLng);
               // infowindow.setPosition(event.latLng);
               infowindow.setPosition(marker.getPosition());
                infowindow.setContent(event.latLng.toString());
                //infowindow.open(map,event.latLng);
             });
        });
        //document.write("3");
        google.maps.event.trigger(marker, 'click');       
    }    
function addMarker(location) {
        countMarker++;
        marker = new google.maps.Marker({
            position: location,
            map: map,
            id: countMarker
        });
        markersArray.push(marker);            
        //alert(marker.id); 
    }

Can anyone help me in this regard please?

Answer 1

try this:

            google.maps.event.addListener(marker, "click", function (event) {
                infoWindow.setContent(this.position);
                infoWindow.open(map, this);
               });

Also, I do not see in the code where your are defining the variable marker.

You might want to add change addMarker(event.latLng); to

var marker = addMarker(event.latLng); 

and change the function to return the marker object:

function addMarker(location) { 
   countMarker++;
   var marker = new google.maps.Marker({
                position: location,                    
                map: map,                     
                id: countMarker                
        }); 

   markersArray.push(marker);                           
   return marker;
}