Google Maps embed overlapping with sticky nav-bar

Question

Kinda unsure on how to deal with this. Struggling to find the piece of HTML in the automatically generated HTML code that is used for the imbed.

Here it is.

<div id="wrapper_script">
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDeXmCynoz5WyHNOSdME2F0CgQrXoj-ecg'></script>
<div style='overflow:hidden;height:400px;width:800px;'>
  <div id='gmap_canvas' style='height:400px;width:800px;'></div>
  <style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
</div>
<a href='https://embedmaps.org/'>google maps widget html</a>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=abb348039bcaaa22664b69e613b04fdd8887cf2f'></script>
<script type='text/javascript'>
 function init_map(){
  var myOptions = {zoom:13,center:new google.maps.LatLng(52.0833,4.2999999999999545), mapTypeId: google.maps.MapTypeId.ROADMAP};
  map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
  marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(52.0833,4.2999999999999545)});
  infowindow = new google.maps.InfoWindow({content:'<strong>Club Magenta</strong><br><br> The Hague<br>'});
  google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});
  infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
  </script>
</div>

Because of this, it overlaps with my nav-bar. https://i.stack.imgur.com/DIe48.png

Any idea what CSS I could use to stop this from happening? I was thinking of using the z-index but I'd be unsure as to where to put the value, and which ones to use.

Answer 1

All z-index's are set at 0 by default. An elements stacking order is first determined by its position in the DOM. Your browser reads your HTML from top to bottom, and stacks the next container it reads on top of the last one it read. For example, your footer will be stacked on top of your header because your footer is read after the header.

So given that everything is z-index 0 by default, simply add a higher z-index to your header e.g. z-index: 1;, or for super safety z-index: 9999; I would avoid using a negative z-index on your google map, because if you have all of your content in lets say, a wrapper div with a background colour, you will end up stacking your map behind this wrapper div.

Also be aware that for z-index to work an element must have its position stated, i.e. relative absolute or fixed. Z-indexing becomes a lot more complicated when you start stacking elements relative to parent containers, but for your current problem this will work fine.

Answer 2

if you using bootstrap navbar and its fixed to top so you need to give body padding:70px, in bootstrap doc you can see :

Body padding required The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

more info : http://getbootstrap.com/components/#navbar