Best IT Recipes

Zoom control and street view not showing up on my google map?

I insert a very basic Google map on my page, and the zoom icon and street print icon are not visible, however, if I put my mouse in the place where they should be, I can zoom in and enter the street view. Thus, the controls are simply 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);

What ideas might come up?

Missing controls

+63
css google-maps google-maps-api-3
Dec 14 '11 at 20:49
source share
6 answers

This is definitely a CSS issue that you have with your code. Find CSS that applies to all images, for example:

 img { max-width: 100%; }
+123
Dec 15 '11 at 4:08
source share

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

 .gmnoprint img { max-width: none; }

The CSS selector .gmnoprint img gets all the [img] images on the Google Map controls [gm] that are not printed [noprint]. In my case, max-width was set globally to 100%. Resolving this issue fixed the issue.

+46
May 08 '13 at 19:04
source share

The best solution to reach only google map

 .gmnoprint img { max-width: none; }
+2
Feb 28 '14 at 10:45
source share

Please note that at the moment it is not even possible to display a full-sized 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 the + and - buttons. This style is suitable for small cards. On touch devices, this control appears as + and - buttons that respond to touch events.

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

0
Feb 17 '12 at 21:28
source share

I came across an option, with offensive CSS as follows:

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

So, an extra line is needed:

  #map_div img {  max-width: none! important;  max-height: none! important; } >
0
Dec 05 '14 at 9:39
source share

I think this may be a problem with the browser or the code on the page into which you are inserting this card.

If I look at this simple hello world code, the controls will appear in order. I geocoded this map in the same place as your sample, so it has nothing 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>
-2
Dec 14 '11 at 10:55
source share


More articles:


All Articles