Google Maps Api not showing icons for zoom buttons, streetview, or fullscreen?

Question

SCREEN SHOT of map with custom markers, infowindows, and styling

Problem :

Having troubling with the google maps API.
I just went to go customize the markers, and edit the pop-up info window text, and then the icons disappeared for zoom buttons, streetview, and fullscreen.

Tried Cases :

I tried deleting all the CSS except that needed to render the map. I tried these CSS tip on what looked like a similar problem:
- Zoom control and streetview not showing on my Google map?
I also tried removing all the code that was used for markers and infowindows. The google buttons still remain blank. They all work (zooming, streetview, and fullscreen), but they are blank which doesn't work for my purposes.

Nothing to add, but I am seeing the same thing in a production app as of 10 minutes ago or so. — jrothafer, Aug 14 '18 at 03:05
That's it! I think google is in the middle of upgrading to 3.34 tonight. I changed the versioning to quarterly and the problem went away. (https://maps.googleapis.com/maps/api/js?v=quarterly &key=YOUR_API_KEY&callback=initMap) — Jake Durell, Aug 14 '18 at 03:18

score 7 · Answer 1 · edited Aug 16 '18 at 02:57

7

We found we had a box-sizing CSS rule targeting all elements on our site:

* {box-sizing: border-box;}

To solve the icon display issue we added a class that targets all elements inside of google maps to change the box-sizing to content-box.

.gmaps * {box-sizing: content-box;}

This solved the issue for us.

edited Aug 16 '18 at 02:57

Pang

9,564
146
81
122

answered Aug 14 '18 at 10:49

TFOH

93
7

i was just writing the same answer! Good job :) – micadelli Aug 14 '18 at 10:55
OP said he deleted all CSS and the problem persists. How is the above code going to help? – MrUpsidown Aug 15 '18 at 11:13

score 3 · Accepted Answer · answered Aug 14 '18 at 10:17

3

You need to update your version to the below

 <script src="https://maps.googleapis.com/maps/api/js?v=quarterly&key=YOUR_API_KEY&callback=initMap"></script>

answered Aug 14 '18 at 10:17

Shane

753
3
8
21

1

Why? In what is this going to fix the issue described in the question? – MrUpsidown Aug 15 '18 at 11:11

score 0 · Answer 3 · answered Sep 14 '20 at 14:20

Along with TFOH's answer, make sure that you remove any max-width from any img tags that appear within the embedded Google map. I had this issue where the Street View icon would not show because I had set images to max-with: 100% so that images remained proportional to their original size.

img {height: auto, max-width: 100%}

.gmaps * {box-sizing: content-box;} .gmaps img {max-width: none;}

score 0 · Answer 4 · answered Oct 18 '20 at 17:18

Wanna add one more answer because none of existing answers really helped me. Hopefully it can be useful to someone else with a problem like mine.

In my case the problem was in a component I was using to wrap google map's div. That component had zoom animation, changing the scale prop. That somehow made the map crazy and zoom controls were not visible (were out of the view).

So in my case solution was to remove that animation, which I didn't need anyway. Another solution might be to delay map displaying until animation ends.

Specifically I had this problem with the Ant Design's Popover component where map was displayed in a popup. To solve it you can do this:

  <Popover
    content={<YourMapComponent />}
    transitionName="" // <--- disable transition
  >
    Hover me
  </Popover>

Google Maps Api not showing icons for zoom buttons, streetview, or fullscreen?

4 Answers4