0

I've got an embedded Google Map on a webpage. It fills the entire width of the page, and I'm absolutely positioning the site's logo over the map.

Seen here: http://crawl.trustarts.org/

I've been playing with z-indexes but can't get the infobox to respond to z-index the way I'd like. Would anyone know how to get the infoboxes to appear over the logo?

This question seemed related but I'm not really familiar enough with the GMaps API...just using a plugin and hoping there's a CSS solution: google maps infobox above all other content z-index does not work

I'd also be happy with a jQuery solution that removed the entire #logo-and-search h1 element upon clicking any of the map markers...but not with a hover, it'd have to be a click as this is for iPad / tablets, too.

Any ideas?

Community
  • 1
  • 1
Nathan
  • 377
  • 1
  • 6
  • 16

1 Answers1

0

There is another little problem with how your #logo-and-search is set up. Currently it's above the map, so the markers that fall below that div won't be clickable. I'm not sure you can do what you want without a JQuery solution or editing the actual GMap API, but since you asked for a solution that would remove that whole section on click or touch, you can use this: http://jsfiddle.net/disinfor/RVUab/1/

disinfor
  • 10,865
  • 2
  • 33
  • 44
  • I ended up implementing something like that as well, kinda on my own but the same idea so thank you disinfor! – Nathan Sep 18 '13 at 18:08