Google Maps: infobox turns up behind markers?

Question

For some reason my infoBox'es turn up behind the markers. I know this is supposed to be impossible, but it is never the less the case. Here is the code for my markers:

        var yellowCircle={
          path: google.maps.SymbolPath.CIRCLE,
          scale: 5,
          fillColor: '#faeadd',
          strokeColor: 'black',
          fillOpacity: 1.0,
          strokeWeight: 0.5,
          zIndex:-10
        };

        var yellowBlackCircle={
          path: google.maps.SymbolPath.CIRCLE,
          scale: 5,
          fillColor: '#faeadd',
          strokeColor: 'black',
          fillOpacity: 1.0,
          strokeWeight: 1.5,
          zIndex:-10

        };


            var marker = new google.maps.Marker({       
                position: new google.maps.LatLng(Lat,Lng), 
                map: map,  
                title: name,
                icon:yellowCircle,
                url:url,
                zIndex:-1,
            });

             google.maps.event.addListener(marker, 'mouseover', function() {
            marker.setIcon(yellowBlackCircle);
              });

            google.maps.event.addListener(marker, 'mouseout', function() {
                marker.setIcon(yellowCircle);
                });

             google.maps.event.addListener(marker, 'click', function() {
              window.location.href = url;
             });

And the code for my infoboxes:

    var myOptions = {
                content: name
                ,boxStyle: {
                  border: "1px solid black"
                 ,textAlign: "center"
                 ,fontSize: "12pt"
                 ,fontType: "arial"
                 ,backgroundColor: "#faeadd"
                 ,fontWeight: "bold"
                 ,zIndex:1
                }
               ,disableAutoPan: true
               ,pixelOffset: new google.maps.Size(-getTextWidth(name, "bold 12pt arial")/2,-30)
               ,position: new google.maps.LatLng(49.47216, -123.76307)
               ,closeBoxURL: ""
               ,isHidden: false
               ,pane: "mapPane"
               ,enableEventPropagation: true
               ,zIndex:1
            };

            var infobox = new InfoBox(myOptions);

             google.maps.event.addListener(marker, 'mouseover', function() {
                infobox.open(map,marker);
              });

              google.maps.event.addListener(marker, 'mouseout', function() {
                infobox.close();
              });

You can see that I have even tried setting the zIndex'es as well, but it has no effect. I believe this is the same question as was asked in google maps infobox above all other content z-index does not work.

I apologize for not attaching a jsfiddle - I couldn't seem to make it work, even after I uploaded the infobox_packed.js to a repository so I could add is as external resource. Instead, here is the whole thing: http://www.kaarebmikkelsen.dk/wp-content/uploads/2014/05/test2.html

The info-box code is mostly copied from https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html.

geocodezip geocodezip · Accepted Answer · 2014-05-30T20:19:51

Your code came from the example that makes "map labels" and you are attaching the infoBox to the mapPane:

pane: "mapPane"

That will put it behind the markers. If you want it to be an infowindow replacement, copy the code from that example:

pane: "floatPane"

from the documentation you reference

Google Maps: infobox turns up behind markers?

1 Answers