Z-index with google maps

Question

I try to add data in google map without using controlDiv, using z-index.

I have this html:

<div #multimap style="width:100%;height:100%;">
</div>

<div style="z-index: -1;">
  <img src="../../../assets/warning-icons/driver/devicetheft.png" class="warning-images">
  <p>0</p>
</div>

First div reference to a google maps, and second div contain a image and number 0.

i try to add this image and number in google map.

what i try:

<div style="z-index: -1;">
  <img src="../../../assets/warning-icons/driver/devicetheft.png" class="warning-images">
  <p>0</p>
</div>

z-index= -1

<div style="z-index: 2;">
  <img src="../../../assets/warning-icons/driver/devicetheft.png" class="warning-images">
  <p>0</p>
</div>

But nothing work!

It's possible to use z-index with google maps?

Answer 1

You don't need to touch z-index to place an element on top of the google map's iframe.

What you want is to add styles to your second div:

position: absolute;
top: 0;
left: 0;

Then you can play with top/left styles to position your div as you wish. Consider wrapping your blocks in another div with absolute positioning to make your position adjustments predictable and straightforward.

Good luck 😉