400px x 400px로 설정된 'mapwrap'div가 있고 그 안에 100 % x 100 %로 설정된 Google 'map'이 있습니다. 따라서지도가 400 x 400px로로드 된 다음 JavaScript를 사용하여 'mapwrap'의 크기를 화면의 100 % x 100 %로 조정합니다. Google지도는 예상대로 전체 화면으로 크기가 조정되지만 타일은 오른쪽 가장자리보다 먼저 사라지기 시작합니다. 페이지.
Google지도를 더 큰 크기의 'mapwrap'div로 다시 조정하도록 호출 할 수있는 간단한 함수가 있습니까?
답변:
Google Maps v2를 사용 checkResize()하는 경우 컨테이너 크기를 조정 한 후지도 에서 호출 하세요. 링크
최신 정보
Google Maps JavaScript API v2는 2011 년에 더 이상 사용되지 않습니다. 더 이상 사용할 수 없습니다.
Google Maps v3의 경우 크기 조정 이벤트를 다르게 트리거해야합니다.
google.maps.event.trigger(map, "resize");크기 조정 이벤트에 대한 문서를 참조하십시오 ( 'resize'단어를 검색해야 함) : http://code.google.com/apis/maps/documentation/v3/reference.html#event
최신 정보
이 답변은 오랫동안 여기에 있었으므로 약간의 데모가 가치가있을 수 있으며 jQuery를 사용하지만 실제로 그렇게 할 필요는 없습니다.
$(function() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map($("#map-canvas")[0], mapOptions);
// listen for the window resize event & trigger Google Maps to update too
$(window).resize(function() {
// (the 'map' here is the result of the created 'var map = ...' above)
google.maps.event.trigger(map, "resize");
});
});html,
body {
height: 100%;
}
#map-canvas {
min-width: 200px;
width: 50%;
min-height: 200px;
height: 80%;
border: 1px solid blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>업데이트 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 버전부터는 아무런 효과가 없습니다.
대중적인 대답 google.maps.event.trigger(map, "resize");은 나에게만 효과가 없었습니다.
여기에 페이지가로드되고지도도로드되었음을 확인하는 트릭이 있습니다. 리스너를 설정하고 맵의 유휴 상태를 수신하면 이벤트 트리거를 호출하여 크기를 조정할 수 있습니다.
$(document).ready(function() {
google.maps.event.addListener(map, "idle", function(){
google.maps.event.trigger(map, 'resize');
});
}); 이것은 나를 위해 일한 내 대답이었습니다.
Wolfgang Pichler의 map-in-a-box 는 다음을 제공합니다.
드래그 및 크기 조정이 가능한 div 요소에지도를로드합니다.
이것이 가장 좋은 일입니다. 지도의 크기가 조정됩니다. 지도의 크기를 조정하기 위해 더 이상 요소를 검사 할 필요가 없습니다. 그것이하는 일은 자동으로 크기 조정 이벤트를 트리거합니다.
google.maps.event.addListener(map, "idle", function()
{
google.maps.event.trigger(map, 'resize');
});
map_array[Next].setZoom( map.getZoom() - 1 );
map_array[Next].setZoom( map.getZoom() + 1 );먼저이 문제를 해결 해주셔서 감사합니다. 토론에서이 문제를 해결할 방법을 찾았습니다. 예, 요점을 봅시다. 문제는 CakePHP3에서 GoogleMapHelper v3 도우미를 사용하고 있다는 것입니다. 부트 스트랩 모달 팝업을 열려고 할 때지도에 회색 상자 문제가 발생했습니다. 2 일 연장되었습니다. 마침내 나는 이것을 수정했습니다.
문제를 해결하려면 GoogleMapHelper를 업데이트해야합니다.
setCenterMap 함수에 아래 스크립트를 추가해야합니다.
google.maps.event.trigger({$id}, \"resize\");그리고 JavaScript에 아래 코드가 필요합니다.
google.maps.event.addListenerOnce({$id}, 'idle', function(){
setCenterMap(new google.maps.LatLng({$this->defaultLatitude},
{$this->defaultLongitude}));
});