• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Fixing The Google Maps Broken Zoom Control and Streetview Icon Issue

General · February 12, 2013

Chances are if you’re developing a responsive website and using a Google map you will encounter an issue where the zoom control and street view control appear to be broken, they’re there but not clickable and look corrupted. The issue is the usual process of developing a responsive site entails of setting max-width: 100% to all images on the site in the form of the following:

img {
    max-width: 100%;
}

This will also break your Google Map controls. The simple fix is to fix the max-width property by targeting your map container with the following CSS:

#mapcontainer img { max-width: inherit; }

Replace #mapcontainer with the ID of your map and presto, problem solved. If that doesn’t solve the issue, you can try appending an !important declaration to the end of it to override any potentially persistent CSS (but you should never need to do that).

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
andrea
andrea
7 years ago

Thanks 🙂

0
ralph
ralph
7 years ago

It works.. I saw this other solution on stockovrflow

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

0
Cheryl
Cheryl
4 years ago

Mine was actually a max-height issue, but I never would have considered it without this article. Thanks so much for taking the time to write this out for everyone.

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • Removing A Character From The Start/End of a String In Javascript
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz