Google Maps Zoom Control Is Messed Up

Google Maps zoom control is messed up

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.

Zoom control and streetview not showing on my Google map?

That is definitely a CSS issue that you have with your code. Look for CSS that is applying to all images like:

img {
  max-width: 100%;
}

Map zoom controls not displaying correctly

The issue should be because of universal img { max-width: 100%; }

Try this one in to your css

.gmnoprint img {
    max-width: none; 
}

Google map zoom control squished

Found : Zoom control and streetview not showing on my Google map?

and : Google Maps API V3 : weird UI display glitches (with screenshot)

In short, add this to your CSS file (updating the ID as necessary):

#map-canvas img { 
  max-width: none; 
  max-height: none;
}

Only white color with zoom control shown in google-maps div area

After all-day digging to the issue...

Finally I figure out the root cause might be the IE version applied to the embed MS Web Browser Control.
First of all, I have caught related information from Google Map API official community support channel.

Discontinue support of Internet Explorer 8

We would like to inform you that we are planning to discontinue support of Internet Explorer 8 (IE8) for the Google Maps JavaScript API v3 around August 31st 2015.

And then I googled to a related page which mentions how to specify IE version of MS Web Browser Control.(Rick Strahl's Web Blog)

Eventually, I solved my problem by applying Registry Hacks from above link^^

Wish this digging journey is helpful for someone encountered the same problem, Good luck.

How to customize zoom control position in google map iframe

If you are using embeded map, there is no way to customize the appearance of the controls. If you want to do that you need to create a map using the Google Maps Javascript API v3. That has documented methods for positioning the controls

How do I change the Google Maps zoom control style?

The terms SMALL and LARGE are misleading a bit, they are not related to the size, they mean used with a zoom-control: hide or show the slider.

There is no built-in option to set the "size".

What you see on the right side seems to be a signed-in map, which uses different controls.

Note: Signed-in maps aren't available in v3.17

---

Related Topics