Отображение карты Google в модальном режиме, созданном с помощью Twitter-бутстрапа
Я пытаюсь вставить карту Google в модальную версию, используя Twitter Bootstrap. Модальная фигура отображается с формой присутствующей карты, но отображается только часть карты, а остальная часть - серая. При изменении размера экрана карта всегда отображается правильно, хотя и не в том месте.
Я искал и нашел такие предложения, как вызов события изменения размера карты или установление максимальной ширины изображения карты в none, но ни одно из этих предложений не помогло до сих пор. Кажется, что карта не может определить правильный размер, пока он скрыт в скрытом элементе.
JS
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.219987, 4.396237),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.219987, 4.396237)
});
marker.setMap(map);
}
HTML
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3></h3>
</div>
<div class="modal-body">
<div id="mapCanvas" style="width: 500px; height: 400px"></div>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
Я использую Twitter Bootstrap v2.0.4. Мне нужна помощь, потому что я не могу правильно запустить событие изменения размера или редактировать css, чтобы карта Google осталась одна.
Ответы
Ответ 1
Google Maps действительно отображает область "Серый", когда она помещается внутри динамического элемента (например: один, который изменяет размер, исчезает и т.д.). Вы правы в том, что запускаете функцию изменения размера, которая должна вызываться после завершения анимации (событие shown.bs.modal в Bootstrap 3 или событие shown в Bootstrap 2):
$("#myModal").on("shown.bs.modal", function () {
google.maps.event.trigger(map, "resize");
});
В Bootstrap 2 вы выполните:
$('#myModal').on('shown', function () {
google.maps.event.trigger(map, "resize");
});
(где map - это имя переменной вашей карты (см. Документация Google Maps для получения дополнительной информации) и #myModal идентификатор от вашего элемента).
Ответ 2
Для меня это работает так (Boostrap 3):
$("#contact-modal").on("shown.bs.modal", function () {
google.maps.event.trigger(map, "resize");
});
Ответ 3
Отображение карты правильно и по центру
Я хотел указать несколько изменений, сделанных мной на основе исходного ответа, чтобы он работал с Bootstrap 3 (проверьте использование модалов).
// Resize map to show on a Bootstrap modal
$('#map-modal').on('shown.bs.modal', function() {
var currentCenter = map.getCenter(); // Get current center before resizing
google.maps.event.trigger(map, "resize");
map.setCenter(currentCenter); // Re-set previous center
});
В этом случае я также позабочусь о возврате карты, основанной на этом вопросе, предложенной в комментарии Ян-Хенка к первому ответу.
Ответ 4
При использовании Bootstrap 3 вам необходимо использовать то, что предусмотрено в их документации, то есть вместо "показанного" использовать "показанный .bs.modal"
Пример:
$('#modal').on('shown.bs.modal', function () {
initialiseMap();
});
Ответ 5
Принятый ответ действительно работает в этом случае, когда содержимое div является локальным. К сожалению, у меня была та же проблема, показывающая карту, которая была включена как часть удаленных данных. Получение дескриптора карты и изменение размера звонка неправильно сконцентрировали мою карту. Вот как я исправил проблему в моей ситуации с удаленными данными.
Включить тег script как часть ваших удаленных данных с помощью функции инициализации карты
<script type="text/javascript">
function renderMap() {
var point = new google.maps.LatLng(51.219987, 4.396237);
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13,
center: point
});
var marker = new google.maps.Marker({ position: point, map: map, icon: 'http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png' });
}
</script>
Вызовите функцию в показанном событии диалога на главной странице
<script type="text/javascript">
$(document).ready(function () {
$('#dlgReportInfo').on('shown', function () {
renderMap();
});
})
</script>
Таким образом, карта уже задана в диалоговом окне перед ее инициализацией. Надеюсь, это поможет любым другим людям с аналогичной ситуацией.
Ответ 6
следующий код работает отлично для бутстрапа 3
$("#mapModal").on("shown.bs.modal", function () {initialize();});
Ответ 7
Принятый ответ избавился от серых ящиков, но не центрирует карту в правильных координатах для меня. Мое решение состояло только в том, чтобы ждать, чтобы отобразить карту до тех пор, пока модальное воспроизведение не закончится.
$('#modal').on('shown', function () {
initialize();
});
Ответ 8
this works for me
**<!-- Modal -->**
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Google Maps</h4>
</div>
<div class="modal-body">
<div id="map_canvas" style="width:auto; height: 500px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
**Button**
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Map</button>
**javascript**
<script type="text/javascript">
function initializeMap() {
var mapOptions = {
center: new google.maps.LatLng(51.219987, 4.396237),
zoom: 12,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.219987, 4.396237)
});
marker.setMap(map);
}
//show map on modal
$('#myModal').on('shown.bs.modal', function () {
initializeMap();
});
</script>
надеюсь, что это поможет
Ответ 9
попробуйте это!
<div class="modal fade" id="map_modal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body"><div id="map_canvas" style="width:530px; height:300px"></div></div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
var map = marker = new Array();
geocoder = NULL;
function addPoint(location, id, mapId) {
if (!marker[id]) {
marker[id] = new google.maps.Marker({
position: location,
map: map[mapId],
draggable: true
});
}
}
function placeMarker(location, editStr, id) {
if (!marker[id]) {
marker[id] = new google.maps.Marker({
position: location,
map: map[id],
draggable: false
});
}
marker[id].setPosition(location);
map[id].setCenter(location);
$("#longitud").val(location.lat());
$("#latitud").val(location.lng());
}
function initializeMap(id, div_id, lat, lng, editStr) {
if (!geocoder)
geocoder = new google.maps.Geocoder();
if (!map[id]) {
var coordinates = new google.maps.LatLng(lat, lng);
var myOptions = {zoom: 8, center: coordinates, mapTypeId: google.maps.MapTypeId.ROADMAP}
map[id] = new google.maps.Map(document.getElementById(div_id), myOptions);
google.maps.event.addListener(map[id], 'click', function(event) {
placeMarker(event.latLng, editStr, id);
});
placeMarker(coordinates, editStr, id);
}
}
$('#map_modal').on('shown.bs.modal', function(e) {
initializeMap("#newMaps", "map_canvas", 10.444598, -66.9287, "");
})
Ответ 10
Я также сталкиваюсь с одной и той же проблемой, но я разрешаю ее, ожидая состояния "незанятого" карты (т.е. когда оно закончено), а затем вызывает изменение размера:
google.maps.event.addListenerOnce(map, 'idle', function () {
var currentCenter = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(currentCenter);
map.setZoom(15);
});
после
map = new google.maps.Map(document.getElementById('map-canvas2'),mapOptions);
Ответ 11
Я исправил решение:
$('#myId').on('shown.bs.modal', function () {
initializeMap() // with initializeMap function get map.
});
//событие показано .bs.modal в модальном бутстрапе будет показано после модального показа, а не использовать show.bs.modal, потому что он будет вызывать перед модальным показом.
