Pane events inconsistent between OSX and Windows for Safari - google-maps-api-3

Question

Using Safari on OSX, the Google Map v3 implementation of panes is inconsistent and is preventing marker click events from functioning depending on what pane(s) are being used.
If you enable the develop menu and then override the User Agent to report as Safari for Windows, the implementation then matches all other browsers (FF, IE, Chrome, etc.). This seems to indicate that it is an issue within the Google API as all that changed was the User Agent string.
Incidentally, adding a marker to the overlayPane (#6) actually adds the marker to the overlayShadow (#2) pane instead. So it is not currently possible to add anything to pane 6 on any browser or platform.
Using the following example, the issue can be observed by hovering over each marker. If the marker receives the hover event, it will turn green.
<style type="text/css">
html, body, #map_canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
for (var i = 0; i <= 5; i++) {
var m = new marker(i);
m.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function marker(index) {
this._latlng = new google.maps.LatLng(-34.397 + (index * .1), 150.644 + (index * .1));
this._div = null;
this._index = index;
}
marker.prototype = new google.maps.OverlayView();
marker.prototype.onAdd = function () {
var div = document.createElement('DIV');
var label = document.createTextNode(this._index + 1);
div.appendChild(label);
div.id = this._index + 1;
div.style.border = "1px solid black";
div.style.backgroundColor = "red";
div.style.width = "20px";
div.style.height = "20px";
div.style.position = "absolute";
google.maps.event.addDomListener(div, 'mouseover', function () {
this.style.backgroundColor = "green";
});
google.maps.event.addDomListener(div, 'mouseout', function () {
this.style.backgroundColor = "red";
});
this._div = div;
var panes = this.getPanes();
switch (this._index) {
case (0):
panes.overlayLayer.appendChild(div);
break;
case (1):
panes.overlayShadow.appendChild(div);
break;
case (2):
panes.overlayImage.appendChild(div);
break;
case (3):
panes.floatShadow.appendChild(div);
break;
case (4):
panes.overlayMouseTarget.appendChild(div);
break;
case (5):
panes.overlayShadow.appendChild(div);
break;
}
}
marker.prototype.draw = function () {
var projection = this.getProjection();
if (projection) {
var div = this._div;
var point = projection.fromLatLngToDivPixel(this._latlng);
if (point && div != null) {
div.style.left = point.x - 10 + 'px';
div.style.top = point.y + -10 + 'px';
}
}
}
</script>
<div id="map_canvas"></div>
Has anyone found a way around this issue, or is there a fix pending?

Answer 1

Regarding the part of your question where you say "the Google Map v3 implementation of panes is inconsistent and is preventing marker click events from functioning depending on what pane(s) are being used," the problem appears to be that you may be attempting to make use of mouse events on panes where mouse events are not intended to be used:
pane 1: overlayLayer - from the api-doc: It may not receive DOM events.
pane 2: overlayShadow - from the api-doc: It may not receive DOM events.
Regarding the part of your question that is focused on the MapPanes:
Incidentally, adding a marker to the overlayPane (#6) actually adds
the marker to the overlayShadow (#2) pane instead. So it is not
currently possible to add anything to pane 6 on any browser or
platform.
First, there is no overlayPane; if you are talking about pane 6, from bottom to top, I believe you meant to say: floatPane. Also, I think the problem is actually a bug in your switch statement code:
switch (this._index) {
case (0):
panes.overlayLayer.appendChild(div);
break;
case (1):
panes.overlayShadow.appendChild(div);
break;
case (2):
panes.overlayImage.appendChild(div);
break;
case (3):
panes.floatShadow.appendChild(div);
break;
case (4):
panes.overlayMouseTarget.appendChild(div);
break;
case (5):
// This code is a duplicate of the code in case(1):
panes.overlayShadow.appendChild(div);
// I believe what you want here is:
panes.floatPane.appendChild( div );
break;
}
I hope this is helpful -