发表新帖
发表新帖

Zoom control and streetview not showing on my Google map?

后端 未结
关注
7 2071
南笙
南笙 2020-11-29 20:08

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

相关标签:
7条回答
  • 无人及你
    2020-11-29 20:09

    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.

    0 讨论(0)
  • 孤街浪徒
    2020-11-29 20:10

    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>
    0 讨论(0)
  • 遇见更好的自我
    2020-11-29 20:12

    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%;
}
    0 讨论(0)
  • 我寻月下人不归
    2020-11-29 20:12

    Best solution to reach only for google map

    .gmnoprint img {
    max-width: none; 
}
    0 讨论(0)
  • 时光取名叫无心
    2020-11-29 20:12

    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
    0 讨论(0)
  • 耶瑟儿～
    2020-11-29 20:31

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题