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).

Answer 1

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/

Answer 2

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.

Answer 3

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

.gmnoprint img { max-width: none; } 

Answer 4

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.

Answer 5

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;
}

Answer 6

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.