Zoom control and streetview not showing on my Google map?

Question

I'm inserting a very basic Google map into my page and the zoom control and streetmap icon are not visible, however if I place my mouse over where they should be I can zoom the map and enter streetview. So the controls are there just not visible.

<script type="text/javascript"
    src="//maps.googleapis.com/maps/api/js?key=<apikey>&sensor=false&region=IT">
</script>

var myOptions = {
    zoom: 17,
    center: latlng,
    panControl: true,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE
    },
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Any ideas what the problem could be?

Missing controls

possible duplicate of [Google Maps zoom control](http://stackoverflow.com/questions/8879544/google-maps-zoom-control) — Dónal, Feb 04 '14 at 01:00

score 127 · Accepted Answer · answered Dec 15 '11 at 04:08

127

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

answered Dec 15 '11 at 04:08

skarE

5,880
2
23
23

44

That was it thanks, I have a responsive page layout and was following the suggestion in [Responsive Web Design](http://www.abookapart.com/products/responsive-web-design) to set the maximum image width to 100%. I fixed it using `#map_container img { max-width:none; }`. – Phill Dec 15 '11 at 04:31
@skarE! you saved me a lot of time. Thank you – Mahmoud Jun 19 '13 at 13:18
On first search i didnt find suche code in my css BUT i am using Twitter Bootstrap framework which uses this fluid images tweak. – dafyk Aug 01 '13 at 17:45
9

Yes, caution to all Twitter Bootstrap users! Their CSS will cause this. Adding `.gmnoprint img { max-width: none; }` (as stated by @Pete) anywhere after the bootstrap CSS inclusion will fix this. – Sandy Aug 22 '13 at 18:04
Zubr Foundation also does this :/ – rzymek Jan 25 '15 at 11:40
Been stuck on this all day long! Thank you skarE. Thank you, thank you, thank you! I also changed `max-height: none` to make this work. Did I say thank you? – nik_m Sep 11 '16 at 15:15

score 46 · Answer 2 · answered May 08 '13 at 19:04

46

I had this problem, the fix was to include this CSS ...

.gmnoprint img { max-width: none; }

The CSS selector .gmnoprint img gets to all images [img] on the Google Map [gm] controls that are non printing [noprint]. In my case max-width had been set globally to 100%. Unsetting this fixed the issue.

answered May 08 '13 at 19:04

Pete

593
4
6

Sometimes a sledgehammer may be needed: `.gmnoprint img { max-width: none !important; }` – Pete Sep 20 '13 at 11:27
And a word of encouragement for testers of this fix: I applied it, accurately, and saw it not work. Went on to other tasks. Eventually, after a day or so, ended up cleaning up other problems with the html in my page -- removed an extra , got my containers all containing the right stuff, yada yada -- when, like magic, my tools just showed up on the next page refresh. The html/css world is a touchy one; keep calm and code on. – Anne Gunn Apr 18 '16 at 14:15

score 2 · Answer 3 · answered Feb 28 '14 at 10:45

2

Best solution to reach only for google map

.gmnoprint img {
    max-width: none; 
}

answered Feb 28 '14 at 10:45

Mo.

26,306
36
159
225

score 1 · Answer 4 · answered Mar 05 '19 at 20:33

I had a very similar issue and it turned out in my case NOT to be a CSS issue. In my case, the Content-Security-Policy header on our site was blocking certain images from being rendered. In this case it was blocking the street view images (loaded from a *.ggpht.com uri) and the button icons which use inline svg data specified using the data: scheme. To fix this, I added the following to the Content-Security-Policy header:

img-src data: 'self' https://*.googleapis.com https://*.google.com https://*.gstatic.com https://*.ggpht.com

score 0 · Answer 5 · edited Apr 26 '18 at 09:31

0

I ran into a variant, with the offending css looking like:

img {
  max-width: 100%;
  max-height: 100%;
}

So, an additional line is needed:

#map_div img {
   max-width: none !important;
   max-height: none !important;
}

edited Apr 26 '18 at 09:31

Mindaugas

11
3

answered Dec 05 '14 at 09:39

prusswan

6,853
4
40
61

score 0 · Answer 6 · answered Feb 17 '12 at 21:28

Note that on the moment it's not even possible to show the full size zoom slider on touch devices (ipad etc). Here's the documentation:

http://code.google.com/apis/maps/documentation/javascript/controls.html

google.maps.ZoomControlStyle.SMALL displays a mini-zoom control, consisting of only + and - buttons. This style is appropriate for small maps. On touch devices, this control displays as + and - buttons that are responsive to touch events.

google.maps.ZoomControlStyle.LARGE displays the standard zoom slider control. On touch devices, this control displays as + and - buttons that are responsive to touch events.

score -2 · Answer 7 · edited Dec 15 '11 at 00:04

I'm thinking this might be a problem with the browser or the code within the page that you're embedding this map.

If I look at this simple hello world code, the maps controls show up fine. I geocoded this map to the same location as your sample, so its not anything to do with the location.

What happens when you use this sample?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true&region=it">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(45.38686, 8.91927);
    var myOptions = {
    zoom: 17,
    center: latlng,
    panControl: true,
    zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE
        },
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Zoom control and streetview not showing on my Google map?

7 Answers7

Linked

Related