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.

Answer 1

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>

Answer 2

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

Answer 3

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.

Answer 4

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>