CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-maps
cohenadair
cohenadair

Reputation: 2072

Can't Drag/Zoom/Interact with Google Maps

E: Found the problem. I had * { width: 100%; height: 100% } at the top of my CSS file. This screwed up the entire map. Removing this solved the problem.

This is a problem that arose from here. With help I was able to remove the white box overlaying the map by adding a z-index to the CSS (still not sure why this happens); however, now I can't interact with the map at all. I can't click+drag or zoom, and the Google watermark appears at the top of the map (and as far as I know it should be at the bottom).

Here is the problem in CodePen (click the second box from the left on the navigation bar at the bottom):

http://codepen.io/anon/pen/pcwir

I've tried many different things, but no matter what it is it just doesn't want to work when implemented in my code. I can get it to work on a separate HTML page, but that isn't ideal.

Thank you in advance for any help!

Upvotes: 0

Views: 6678

Answers (1)

jos
jos

Reputation: 48

Remove the CSS line

#content_2 .gm-style>div:first-child{z-index:initial!important;}

And add this to your CSS

.gm-style * {
  width:auto;
  height:auto;
}

That should fix your problem.

Upvotes: 1

Related Questions