Google Maps API - Click event doesn't work, Mouseover does?

Question

First post here, usually a reader not a poster but here goes!

Having a bit of trouble with 'click' events using the Google Maps API.

Here's the scenario:
Marker is placed on map, click event added to marker, works fine. Another marker is added to the map directly on top of the existing marker with no click event. The click event for the original marker now no longer works! However, if I change the 'click' event to a 'mouseover' it works fine.

Code for first Marker:

var marker1 = new google.maps.Marker({
        position: marker1[0],
        map: map,
        draggable: false,
        icon: new google.maps.MarkerImage('img/' + type + '.png',           
        new google.maps.Size(16, 16),
        new google.maps.Point(0,0),
        new google.maps.Point(8, 8)
        )
    });

Code for Marker that gets overlayed on existing marker:

var marker2 = new google.maps.Marker({
          position: position,
          map: map,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillOpacity: 0,
            strokeOpacity: 1.0,
            strokeColor: '#72008F',
            strokeWeight: 3.0, 
            scale: 10
          }
        });

Code for Listener:

google.maps.event.addListener(marker, 'click', function(event) {
    $("#IDhere").html("Some HTML here");
});

Answer 1

I solved my problem by way of work-around.

The issue as I see it was that defining the 'clickable' marker using "new google.maps.MarkerImage" made it part of the google maps canvas element.

Then when Markers defined using "google.maps.SymbolPath.CIRCLE" came along and were put on top of the clickable marker they are separate elements confined into Divs layered on top of the map Canvas element.

Therefor as @geocodezip rightly pointed out, the clickable marker (part of google maps canvas) was being hidden by the other marker in its Div.

My solution was to change the way i created the clickable marker. I used another Circle Symbol path and gave it a zIndex of 99999 so always on top.

Marker1 now looks like this

var marker = new google.maps.Marker({
        position: marker1[0],
        map: map,
        draggable: false,
        zIndex: 99999,
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillOpacity: 1,
            fillColor: type,
            strokeOpacity: 1,
            strokeColor: '#000',
            strokeWeight: 1 ,
            scale: 5
          }         
    });