Как ограничить увеличение размера карты Google не меньше ширины / высоты экрана

Question

У меня проблема с размером карты Google. Изображение карты с изменением масштаба может быть меньше, чем на экране, и у меня есть серые полосы сверху и снизу.

В API карты Google они имеют те же полосы, когда мы используем масштабирование. Но на https://www.google.com/maps/ есть предел, и мы не можем сделать карту меньше этого размера.

Как я могу установить такой предел?

Answer 1

Использование strictBounds , с широтой границ 85 / -85:

restriction: {
  latLngBounds: {
    north: 85,
    south: -85,
    west: -180,
    east: 180
  },
  strictBounds: true
}

подтверждение концепции скрипта

фрагмент кода:

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 1,
    restriction: {
      latLngBounds: {
        north: 85,
        south: -85,
        west: -180,
        east: 180
      },
      strictBounds: true
    }
  });
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>