Question

I am attempting to create our college campus map for our mobile website that will be launching shortly.

I have followed google’s map api v3 example for creating a simple image overlay (found here: http://code.google.com/apis/maps/documentation/javascript/examples/overlay-simple.html) which I have successfully created.

However, my question is and what I am struggling greatly with is, how to place markers that show on top of this image overlay?

I understand how to make a marker on google maps, and attempted to implement it with the simple code of:

    var myLatLng = new google.maps.LatLng(xx.xxxxx,-xx.xxxxx);
    var marker = new google.maps.Marker({
        position: myLatLng, 
        map:map,
        title:"testing"
    });

however placing that in the initialize section, causes the marker to fall under my custom image overlay… I read that I need to place it in one of the map panes that is greater then the 3rd pane, but this is where I would need some help, where to place this and how?

Answer 1

Markers always render in the overlayImage pane, so rather than trying to move the marker, move the overlay you added so that it appears in a lower pane (beneath the markers).

Replace:

var panes = this.getPanes();
panes.overlayImage.appendChild(div);

with:

var panes = this.getPanes();
panes.overlayLayer.appendChild(div);

That is, replace overlayImage with overlayLayer. The Maps API V3 Reference tells me is the pane that contains ground overlays, polygons and polylines (all of which appear below markers).