移动设备上的 Google 地图缩放级别

Question

I have made a google maps with the API. The map is working as it should, but I am not satisfied with the zoom level on mobile devices. I would like to zoom more out, but only on mobile.

Is it possible to change the zoom only on mobile?

HTML

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12">
    <div id="map"></div>
  </div>
</div>

CSS

#map {
  height: 400px;
  width: 100%;
  background-color: grey;
}

Javascript

<script>
  function initMap() {
    var center = {lat: 56.463415, lng: 9.495170};
    var locations = [

      ['Headline', 'Headline<br>Address<br><a href="#" target="_blank">Show direction</a>', 1.686340, 15.998270],

    ];

    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: center
    });
    var infowindow = new google.maps.InfoWindow({});
    var marker, count;
    for (count = 0; count < locations.length; count++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[count][2], locations[count][3]),
        map: map,
        title: locations[count][0]
      });
      google.maps.event.addListener(marker, 'click', (function(marker, count) {
        return function() {
          infowindow.setContent(locations[count][1]);
          infowindow.open(map, marker);
        }
      })(marker, count));
    }
  }
  google.maps.event.addDomListener(window, 'load', initMap);
</script>

Answer 1

You would get the display width by (window.screen.width * window.devicePixelRatio) and similarly the height (window.screen.height * window.devicePixelRatio).

Then you could eg check the max resolution on which your map becomes too small using dev tools in your browser.

At the end change the zoom property of that condition. For example:

var screenWidth = window.screen.width * window.devicePixelRatio;
var screenHeight = window.screen.height * window.devicePixelRatio;
if (screenWidth < 600 && typeof map !== "undefined")
{
    map.setZoom(10);
}

Other way to detect mobile devices would be using http://www.modernizr.com/ library.