[jquery] 숨겨진 div 내부의 Google지도를 다루는 방법 (업데이트 된 사진)

페이지가 있고 Google지도가 처음에는 숨겨진 div 안에 있습니다. 그런 다음 링크를 클릭 한 후 div를 표시하지만지도의 왼쪽 상단 만 표시됩니다.

클릭 후이 코드를 실행하려고했습니다.

    map0.onResize();

또는:

  google.maps.event.trigger(map0, 'resize')

어떤 아이디어. 여기에 숨겨진지도가있는 div를 보여준 후 보이는 이미지가 있습니다.

답변

방금 직접 테스트했으며 여기에 어떻게 접근했는지 알려줍니다. 매우 간단합니다. 설명이 필요한 경우 알려주세요.

HTML

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

CSS

<style type="text/css">
#map_canvas {display:none;}
</style>

자바 스크립트

<script>
function displayMap()
{
    document.getElementById( 'map_canvas' ).style.display = "block";
    initialize();
}
function initialize()
{
    // create the map
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng( 0.0, 0.0 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map( document.getElementById( "map_canvas" ),myOptions );
}
</script>

답변

나는 같은 문제를 겪고 있었고 div를 보여줄 때 전화 google.maps.event.trigger(map, 'resize');하면 문제가 해결되는 것으로 나타났습니다.

답변

google.maps.event.trigger($("#div_ID")[0], 'resize');

변수 맵을 사용할 수없는 경우 divGMAP을 포함 하는 변수 맵에서 첫 번째 요소 여야합니다 (어리석지 않은 경우) .

답변

Bootstrap 탭 안에 Google 맵이 있었는데 제대로 표시되지 않았습니다. 이것은 나의 고침이었다.

// Previously stored my map object(s) in googleMaps array

$('a[href="#profileTab"]').on('shown', function() {   // When tab is displayed...
    var map = googleMaps[0],
        center = map.getCenter();
    google.maps.event.trigger(map, 'resize');         // fixes map display
    map.setCenter(center);                            // centers map correctly
});

답변

사업부 크기를 조정할 때지도를 새로 고치는 방법

전화하는 것만으로는 충분하지 않습니다 google.maps.event.trigger(map, 'resize');.지도의 중심도 재설정해야합니다.

var map;

var initialize= function (){
    ...
}

var resize = function () {
    if (typeof(map) == "undefined") {) {
        // initialize the map. You only need this if you may not have initialized your map when resize() is called.
        initialize();
    } else {
        // okay, we've got a map and we need to resize it
        var center = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    }
}

크기 조정 이벤트를 수신하는 방법

각도 (ng-show 또는 ui-bootstrap 축소)

ng-show가 업데이트되기 전에 $ watch가 실행될 수 있으므로 div는 여전히 보이지 않기 때문에 ng-show에 바인딩 된 값이 아닌 요소의 가시성에 직접 바인딩됩니다.

scope.$watch(function () { return element.is(':visible'); },
    function () {
        resize();
    }
);

jQuery .show ()

내장 콜백 사용

$("#myMapDiv").show(speed, function() { resize(); });

부트 스트랩 3 모달

$('#myModal').on('shown.bs.modal', function() {
    resize();
})

답변

iframe 코드를 복사 / 붙여 넣기하여 Google지도를 삽입했으며 Google Maps API를 사용하지 않으려 는 경우 쉬운 솔루션입니다. 숨겨진지도를 표시 할 때 다음 자바 스크립트 행을 실행하십시오. iframe HTML 코드를 가져 와서 동일한 위치에 삽입하므로 다시 렌더링됩니다.

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

jQuery 버전 :

$('#map-wrapper').html( $('#map-wrapper').html() );

HTML :

....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....

다음 예제는 Bootstrap 3 탭에 처음 숨겨져있는 맵에서 작동합니다.

<script>
$(document).ready( function() {

    /* Detects when the tab is selected */
    $('a[href="#tab-id"]').on('shown.bs.tab', function() {

        /* When the tab is shown the content of the wrapper
           is regenerated and reloaded */

        $('#map-wrapper').html( $('#map-wrapper').html() );

    });
});
</script>

답변

기본 창 크기 조정 이벤트 만 트리거 할 수도 있습니다.

Google지도가 자동으로 다시로드됩니다.

window.dispatchEvent(new Event('resize'));