Для скопирования карты Google Map и добавления маркеров на ней в модальное окно Bootstrap, можно использовать следующий подход:
1. Сначала создайте карту Google Map и добавьте маркеры на нее. Например:
```javascript
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 40.712776, lng: -74.005974}
});
var marker = new google.maps.Marker({
position: {lat: 40.712776, lng: -74.005974},
map: map,
title: 'New York City'
});
}
```
2. Далее, при открытии модального окна, скопируйте содержимое карты Google Map. Можно использовать jQuery для этого:
```javascript
$('#myModal').on('shown.bs.modal', function () {
var originalMap = document.getElementById('map');
var copiedMap = originalMap.cloneNode(true);
var modalBody = document.getElementById('modalBody');
modalBody.appendChild(copiedMap);
});
```
3. Если необходимо добавить маркеры на скопированную карту, можно продолжить работу с ней внутри модального окна. Например:
```javascript
$('#myModal').on('shown.bs.modal', function () {
var originalMap = document.getElementById('map');
var copiedMap = originalMap.cloneNode(true);
var modalBody = document.getElementById('modalBody');
modalBody.appendChild(copiedMap);
var modalMap = new google.maps.Map(copiedMap, {
center: {lat: 40.712776, lng: -74.005974},
zoom: 12
});
var marker = new google.maps.Marker({
position: {lat: 40.712776, lng: -74.005974},
map: modalMap,
title: 'New York City'
});
});
```
4. Если необходимо установить новые границы для карты в модальном окне, используйте объект `modalMap` для этого:
```javascript
modalMap.fitBounds(bounds);
```
Таким образом, вы сможете скопировать карту Google Map в модальное окно и взаимодействовать с ней, добавляя маркеры или устанавливая новые границы.