Twitter Bootstrap으로 만든 모달에서 Google지도 표시
Twitter Bootstrap을 사용하여 모달에 Google지도를 삽입하려고합니다. 모달은지도 모양과 함께 표시되지만지도의 일부만 표시되고 나머지는 회색입니다. 화면 크기를 조정할 때지도는 잘못된 위치에 중앙에 위치하더라도 항상 올바르게 표시됩니다.
지도의 크기 조정 이벤트를 호출하거나지도 이미지의 최대 너비를 없음으로 설정하는 것과 같은 제안을 검색하고 찾았지만 지금까지 이러한 제안 중 어느 것도 도움이되지 않았습니다. 지도가 숨겨진 요소에있는 한 정확한 크기를 파악하지 못하는 것 같습니다.
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지도를 그대로두기 때문에 도움이 필요합니다.
Google지도는 동적 요소 (예 : 크기 조정, 페이드 등) 내부에 배치 될 때 실제로 "회색"영역을 표시합니다. 애니메이션이 완료되면 호출해야하는 "크기 조정"기능을 트리거하는 것이 맞습니다 ( shown.bs.modalBootstrap 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지도 문서 참조) 및 #myModal요소의 ID입니다).
업데이트 2018-05-22
Maps JavaScript API 버전 3.32의 새로운 렌더러 릴리스에서는 크기 조정 이벤트가 더 이상 Map클래스 의 일부가 아닙니다 .
문서 상태
지도 크기를 조정하면지도 중심이 고정됩니다.
이제 전체 화면 컨트롤이 중앙을 유지합니다.
더 이상 크기 조정 이벤트를 수동으로 트리거 할 필요가 없습니다.
출처 : https://developers.google.com/maps/documentation/javascript/new-renderer
google.maps.event.trigger(map, "resize"); 3.32 버전부터는 아무런 효과가 없습니다.
저에게는 다음과 같이 작동합니다 (Boostrap 3).
$("#contact-modal").on("shown.bs.modal", function () {
google.maps.event.trigger(map, "resize");
});
지도를 정확하게 중앙에 표시
원래 답변을 바탕으로 Bootstrap 3에서 작동하도록 몇 가지 수정 사항을 지적하고 싶었습니다 ( 모달 사용법 확인 ).
// Resize map to show on a Bootstrap's 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
});
이 경우 첫 번째 답변에 대한 Jan-Henk의 의견에서 제안 된 이 질문을 기반으로지도의 최근 작업도 처리합니다 .
Bootstrap 3를 사용할 때 문서에 제공된 것을 사용해야합니다. 즉 'shown'대신 'shown.bs.modal'을 사용하세요.
예:
$('#modal').on('shown.bs.modal', function () {
initialiseMap();
});
허용되는 대답은 실제로 div의 내용이 로컬 인 경우에 작동합니다. 불행히도 원격 데이터의 일부로 포함 된지도를 표시하는 데 동일한 문제가 발생했습니다. 지도의 핸들을 가져 와서 크기 조정을 호출하면 내지도를 올바르게 중앙에 배치하지 못했습니다. 원격 데이터 상황에서 문제를 해결하는 방법은 다음과 같습니다.
지도를 초기화하는 함수와 함께 스크립트 태그를 원격 데이터의 일부로 포함
<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>
이렇게하면지도를 초기화하기 전에 대화 상자에서 이미 크기가 조정됩니다. 바라건대 이것은 비슷한 상황을 가진 다른 사람들에게 도움이 될 것입니다.
받아 들여지는 대답은 회색 상자를 제거했지만지도를 올바른 좌표로 중앙에 배치하지 않습니다. 내 해결책은 모달이 표시 될 때까지지도 렌더링을 기다리는 것이 었습니다.
$('#modal').on('shown', function () {
initialize();
});
다음 코드는 부트 스트랩 3에서 완벽하게 작동합니다.
$("#mapModal").on("shown.bs.modal", function () {initialize();});
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>
이것이 도움이되기를 바랍니다
솔루션으로 수정했습니다.
$('#myId').on('shown.bs.modal', function () {
initializeMap() // with initializeMap function get map.
});
// 모달 부트 스트랩의 이벤트 shown.bs.modal 은 모달 쇼 이후에 표시되며, show.bs.modal 은 모달 쇼 이전에 호출되므로 사용하지 않습니다 .
이 시도 !
<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, "");
})
나는 또한 같은 문제에 직면하고 있지만지도의 '유휴'상태 (즉, 완료 될 때)를 기다린 다음 크기 조정을 호출하여 해결합니다.
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);
'programing tip' 카테고리의 다른 글
| UITextField 외부의 아무 곳이나 터치 할 때 키보드를 닫는 방법 (신속하게)? (0) | 2020.12.06 |
|---|---|
| 연기 테스트 란 무엇입니까? (0) | 2020.12.06 |
| OS X에서 Java 8 용 무제한 강도 JCE를 설치하는 방법은 무엇입니까? (0) | 2020.12.06 |
| 뛰어난 Common Lisp 코드의 예? (0) | 2020.12.05 |
| 새로운 Backbone.Model () 대 Backbone.Model.extend () (0) | 2020.12.05 |