CODEWITHSUNDEEP
cssgoogle-mapstouchgoogle-maps-markersmulti-touch
Arvalis
Arvalis

Reputation: 21

How to style Google maps prompt: 'use two fingers to move the map' for mobile devices

I need to set higher z-index to this prompt window, because the map pins stays over it when appears.

Does anyone knows class or id of it? Or how to make it appear over the pins?

Upvotes: 1

Views: 3711

Answers (2)

allicarn
allicarn

Reputation: 2919

You can style the message using the hook that @Stephen mentioned, and adjust the z-index using !important to override the one applied inline (z-index: 2). Using the inspector, I found that in my code, my markers were on a div that had an inline z-index: 4; applied, so I would want to set this prompt to 5 to sit on top of that marker layer.

However, if you adjust this z-index to sit on top of your markers, since this messaging is just opacity: 0 (not display:none) it will block interaction with your markers, if you want to be able to click on them, etc. To avoid this, you can use pointer-events: none to make this prompt non-interactive and in effect "see through" so that you can interact with the stuff behind it.

.gm-style-pbc {
    z-index: 5 !important;
    pointer-events: none;
}

As @Stephen mentioned, this "hook" is not officially supported.

Upvotes: 0

Stephen Michael Hammit
Stephen Michael Hammit

Reputation: 977

This is a bit of a hack, but I hope it helps you to accomplish what you are trying to do. I just want to mention that this isn't really supported and may stop working at any time due to that.

The class used is .gm-style-pbc. You can actually make the entire message disappear like so:

.gm-style-pbc{
display: none !important
}

You should also be able to do some other styling, for example I made the background red and moved the message over to the right:

.gm-style-pbc{
  background-color: red !important;
  left: 30px !important;
}

I hope this helps!

Upvotes: 2

Related Questions