Zoom control and streetview not showing on my Google map?

Css Problem Overview

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

Css Solutions

Solution 1 - Css

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

Solution 2 - Css

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.

Solution 3 - Css

Best solution to reach only for google map

.gmnoprint img {
    max-width: none; 
}

Solution 4 - Css

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.

Solution 5 - Css

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

Solution 6 - Css

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

Solution 7 - Css

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>

Content Type	Original Author	Original Content on Stackoverflow
Question	Phill	View Question on Stackoverflow
Solution 1 - Css	skarE	View Answer on Stackoverflow
Solution 2 - Css	Pete	View Answer on Stackoverflow
Solution 3 - Css	Mo.	View Answer on Stackoverflow
Solution 4 - Css	dsomnus	View Answer on Stackoverflow
Solution 5 - Css	prusswan	View Answer on Stackoverflow
Solution 6 - Css	jkindwall	View Answer on Stackoverflow
Solution 7 - Css	ccuesta	View Answer on Stackoverflow