Google Maps zoom control is messed up

Question

I use the Google Maps API (v.3) to show a map with a couple of markers. I recently noticed that the control used to zoom the map is messed up (it wasn't always like this). I have no idea what the cause is.

enter image description here

Update

This post originally had a link to a page where you could view the issue, but the link is broken now, so I've removed it.

This issue doesn't happen with Bootstrap uf you use the is map_canvas as the map div id. — Ben, Sep 16 '12 at 14:39

score 109 · Accepted Answer · edited Jan 08 '14 at 18:15

109

Your CSS messed it up. Remove max-width: 100%; in line 814 and zoom controls will look fine again. To avoid such bugs use more specific selectors in your CSS.

edited Jan 08 '14 at 18:15

Dónal

185,044
174
569
824

answered Jan 16 '12 at 11:55

Konrad Dzwinel

36,825
12
98
105

12

This is also true if you're using Twitter's Bootstrap, they have a img { max-width:100%} that messes this up. It should be fixed in the 2.0.2 branch – Ken Feb 26 '12 at 16:52
1

Many CSS reset files also have `img {max-width:100%;}` set. – avesse Jul 10 '12 at 11:53
Awesome! I too was having problems with this, and I just recently moved to bootstrap css. Mucho ++++ – Kevin Mansel Jul 24 '12 at 14:46
Had the same issue with jquery mobile. They have `.ui-mobile img {max-width: 100%;}` in their css which had to be removed. – Jeremy Aug 12 '12 at 16:55
Interesting that it's bootstrap that causes this. Made me nuts for a while. – Ben Sep 16 '12 at 14:13
28

to fix that at bootstrap just give your maps div class google-maps – Samy Massoud Jan 13 '13 at 09:23
@SamyMassoud great tip, any idea if Foundation also has something similar? Can't find it in the docs – ithil Sep 27 '13 at 10:34
@ithil Giving your Google Maps element an ID of `googlemap` or `map_canvas` or a class of `map_canvas` should do the trick. – Kevin Ji Nov 24 '13 at 02:59
@ithil Yes, Foundation does something similar. The trick by Aligned works very nice to fix this. – Ideogram Oct 21 '14 at 07:43

score 80 · Answer 2 · edited Nov 24 '13 at 02:56

#myMap_canvas img {
    max-width: none;
}

fixed it for me, but I also wanted to point out the comment on the question by @Ben, "This issue doesn't happen with Bootstrap if you use the is map_canvas as the map div id". He's right. I'm not using Bootstrap, but the problem started happening after I changed the div id.

Setting it back to map_canvas fixed it without the max-width change.

<div id="map_canvas"></div>

score 21 · Answer 3 · edited Nov 24 '13 at 02:56

If you're using Bootstrap, just give it "google-maps" class. This worked for me.

As an alternative you might reset everything for the google map div as a kind of last-resort solution:

HTML:

<div class="mappins-map"><div>

CSS:

.mappins-map img { 
    max-width: none !important; 
    height: auto !important; 
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

score 16 · Answer 4 · edited May 23 '17 at 12:34

16

Just share @Max-Favilli answer:

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>

Thanks to @Max-Favilli

https://stackoverflow.com/a/19339767/3070027

edited May 23 '17 at 12:34

Community

1
1

answered Jan 28 '14 at 12:14

poostchi

422
1
5
14

score 5 · Answer 5 · edited Nov 24 '13 at 02:58

5

If you're a Twitter Bootstrap user you should add this line to your CSS:

.gmnoprint img { max-width: none; }

edited Nov 24 '13 at 02:58

Kevin Ji

10,479
4
40
63

answered Aug 28 '13 at 18:34

Fernando Prieto

520
1
6
19

score 4 · Answer 6 · edited Nov 24 '13 at 02:57

4

I had this problem as well and using

.google-maps img {
    max-width: none;
}

didn't work. I eventually used

.google-maps img {
    max-width: none !important;
}

and it worked like a charm.

edited Nov 24 '13 at 02:57

Kevin Ji

10,479
4
40
63

answered Oct 02 '13 at 07:01

Dylan Becks

49
1

!important might not be necessary if your selector is more specific. – Sascha Nov 07 '14 at 10:08

score 2 · Answer 7 · edited Nov 24 '13 at 02:56

2

If you're using Yahoo's Pure CSS, give your div the "google-maps" class like Bootstrap, and put this rule in your CSS:

.google-maps img {
    max-width: none;
    max-height: none;
}

As far as I can tell, Pure CSS has no way of fixing this issue on its own.

edited Nov 24 '13 at 02:56

Kevin Ji

10,479
4
40
63

answered Jun 08 '13 at 23:16

dmzza

2,308
1
21
33

score 0 · Answer 8 · answered Jun 10 '13 at 10:10

Those options you guys told me didn´t work for my website.

I use Bootstrap V3 and focussed on the functionality. The main reason was that i had given my map a different ID then the CSS file used to display the zoom bar with the yellow streetvieuw guy

I renamed map_canvas to mapholder and then it worked for me! Thanks anyways for the hints that i should look into the CSS files!

score 0 · Answer 9 · answered Sep 29 '14 at 17:58

I tried all the above solutions, and others from other forums to no avail. it was really annoying because I have another non-Wordpress site where the code worked perfectly. (I was trying to display a Google map in a Wordpress page, but the zoom and Streetview controls were distorted).

The solution I did was to create a new html file (copy paste all the code into Notepad and name it xyz.html, save as type "all files"). Then upload/ftp it up to website, and setup a new Wordpress page and use an embed function. When editing the page go to the text editor (not the visual editor) and copy/type:

http://page URL width="900" height="950">

If you change the dimensions, remember to change it in both arguments above, or you get weird results.

There we go - might not be as clever as some other answers, but it worked for me! Evidence here: http://a-bc.co.uk/latitude-longitude-finder/

Google Maps zoom control is messed up

Update

9 Answers9

Linked