I am trying to add a title over a rendered map. I've put an H2 right before the shortcode and have styled it so it sits on top of the map. However, when I open one of the map markers, the results sit on top of the H2. I've tried setting a high z-index on the .gm-style-iw popup that is higher than the H2. However, no matter what I do, I can't seem to make it sit on top of the map. Is there some Javascript that is affecting the z-index?
No, but you probably need to put your h2 in a positioned element so you can adjust its z-index. I don't really recommend placing content over a Google Map, you should use the JavaScript API to add a custom text overlay instead.
https://developers.google.com/maps/documentation/javascript/customoverlays
I tried doing making the H2 absolutely positioned and gave the popup a high z-index. When I used the z-context Chrome add on, I found some divs that didn't have a stacking context. I added some CSS that gave all of the tags below the popup a stacking context but it still didn't work. Is there some JavaScript that could be interfering with it?
So I came up with a solution by adding the following styles:
.js-wpv-view-layout .wpv-addon-maps-render {
z-index: 0;
}
.js-wpv-view-layout .wpv-addon-maps-render > div {
z-index: 0;
}
.js-wpv-view-layout .wpv-addon-maps-render > div > .gm-style > div:after {
content: 'Title Overlay Message';
}
It seems to work nicely and is easier than using the JavaScript API. Can you think of any side effects of using this?
Again, I don't recommend placing HTML content over the Google Map interface. It's not designed to work that way and could have unexpected consequences, like losing interactivity in the map on certain devices.
I'll try that approach and see if that works better. My issue is resolved now. Thank you!
