6

I have a Google map issue, everything seems to working except the Zoom buttons seem messed up

Here is an image of the map. enter image description here

I'm guessing that something is overlapping but I'm not really sure.

Liam
  • 27,717
  • 28
  • 128
  • 190
Jazzy
  • 305
  • 5
  • 11

4 Answers4

12

Seems I'm very late, still thought to share my thoughts.

It's not a good idea to edit a library's core css. Rather we can override it

This is what i used.try this

#mapDiv img{ max-width: none; }
Rui Jarimba
  • 11,166
  • 11
  • 56
  • 86
arun
  • 121
  • 1
  • 2
  • I can't believe it! Thank you! – András May 06 '14 at 08:00
  • I found that I also needed to add `position: absolute;` to `.gmnoprint img` in order to override something in Bootstrap framework that had messed up the styling of the controls. – Jonny Leigh Dec 19 '18 at 08:29
6

First of all, the link you have provided is not working.

This problem is generally due to the css (I think its bootstrap.css),which makes the google map controls messed up. Check for the line having code:max-width:100%

You will have to remove it.

Check it if it works.

qwerty
  • 2,392
  • 3
  • 30
  • 55
  • Thanks this is exactly what the problem was. I had to remove max-width: 100%; from the img part of the bootstrap.css – Jazzy Aug 10 '12 at 21:12
3

With latest version of google maps api you need this:

<style>
  .gm-style img { max-width: none; }
  .gm-style label { width: auto; display: inline; }
</style>

answer from: https://stackoverflow.com/a/19339767/3041072

Community
  • 1
  • 1
jadelomeiri
  • 31
  • 4
0

Bootstrap.css actually has a class called google-maps that will set the max-width of the img to none. The code in bootstrap.css is

#map_canvas img, .google-maps img{max-width:none}

Here is a link to the question on StackOverflow: Twitter Bootstrap CSS affecting Google Maps

Community
  • 1
  • 1
tabz100
  • 1,463
  • 11
  • 14