Уровень масштабирования Карт Google на мобильных устройствах

Question

Я сделал карты Google с API.Карта работает как надо, но меня не устраивает уровень масштабирования на мобильных устройствах.Я хотел бы увеличить масштаб, но только на мобильном телефоне.

Можно ли изменить масштаб только на мобильном телефоне?

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

Вы можете получить ширину дисплея по (window.screen.width * window.devicePixelRatio) и аналогично высоте (window.screen.height * window.devicePixelRatio).

Тогда вы можете, например, проверить максимальнуюразрешение, при котором ваша карта становится слишком маленькой, используя инструменты dev в вашем браузере.

В конце измените свойство zoom этого условия.Например:

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

Другим способом обнаружения мобильных устройств будет использование библиотеки http://www.modernizr.com/.