Как в Google Maps адаптировать масштаб под размер круга?

Question

Сейчас zoom карты фиксированный - 20. Нужно что бы масштаб карты адаптировался под размер круга (размер может быть абсолютно разным), что бы его было полностью видно.

Вот как сейчас:

Нужно что бы масштаб увеличивался или уменьшался до таких размеров, что бы круг полностью помещался в видимую область.

Answer 1

Решение на codepen.io

В данном коде только ставите координаты в let mapCenter = new google.maps.LatLng(49.9935, 36.23038); //координаты Харькова

и радиус выделяемой области в radius: 3000

автомасштабирование само будет производиться

Высоту карты задавайте хардкодом как в примере в div.

Скопируйте код к себе, потому что по кнопке Выполнить код логи перекрывают весь результат работы

Код рабочий, хоть и ошибка вылетает со стороны stackoverflow по поводу карты.

function init() {
  let mapCenter = new google.maps.LatLng(49.9935, 36.23038); //координаты Харькова
  let map = new google.maps.Map(document.getElementById("map"), {
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  let data = "Hello World!";
  let infowindow = new google.maps.InfoWindow({
    content: data
  });

  let marker = new google.maps.Marker({
    map: map,
    position: mapCenter,
    title: "Drag me!"
  });

  google.maps.event.addListener(marker, "click", function () {
    infowindow.open(map, marker);
  });

  let circle = new google.maps.Circle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: map,
    radius: 3000 // Рудиус площади для автомасштабирования 3000 km
  });

  circle.bindTo("center", marker, "position");
  map.fitBounds(circle.getBounds());
}

google.maps.event.addDomListener(window, "load", init);

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<div id="map" style="height:400px"></div>

БЛОГ НА HUSL

Как в Google Maps адаптировать масштаб под размер круга?

Ответы (1 шт):