@ligisayan

Как правильно скопировать google карту в модальное окно и добавить в неё указатели?

Всем привет!

Есть карта google map. Теперь я хочу скопировать и отобразить текущую карту в модальном окне bootstrap и по условию производить с ней действия (добавлять маркеры).

Но, сталкиваюсь с двумя проблемами:

Копирую с помощью функции map.getDiv() и получаю HTMLElement MapDiv карты, который помещаю внутрь компонента модального окна modalmaped.append(map.getDiv()); Однако, исходная карта почему-то не копируется, а вырезается из исходного места (мне нужно добиться копирования)
При задании новых границ в карте, которая теперь в модальном окне modalmaped.fitBounds(bounds); я получаю ошибку:
Uncaught TypeError: modalmaped.fitBounds is not a function


Как это исправить?

Код
var map = "null";
var lat = 54.6786609;
var lng = 25.3077807;

function myMap() {
  var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: new google.maps.LatLng(51.508742, -0.120850),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      stylers: [{
        saturation: -100
      }]
    }],
    zoom: 30
  };
  map = new google.maps.Map(mapCanvas, mapOptions);
}

document.getElementById('showMap').addEventListener('shown.bs.modal', function(event) {
  modalmaped = document.getElementById('new-map');
  modalmaped.append(map.getDiv());
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(new google.maps.LatLng(lat, lng));

  if ((modalmaped !== undefined) && (modalmaped !== null)) {
    modalmaped.fitBounds(bounds);
    modalmaped.setZoom(30);

  }
});

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="map"></div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#mapModal">
  Launch demo modal
</button>
<div id="mapModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="new-map"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
  • Вопрос задан
  • 36 просмотров
Пригласить эксперта
Ответы на вопрос 1
freeExec
@freeExec
Участник OpenStreetMap
Создай новую карту дам, а не заниматься дублированием, это всё равно не сработает, ибо карта это JS, который управляет разметкой.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы