숨겨진 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'));

나는 똑같은 문제가 있었는데, google.maps.event.trigger(map, 'resize')나를 위해 일하지 않았다.

내가 한 것은지도를 표시 한 후 타이머를 설정하여지도를 업데이트하는 것이 었습니다 div...

//CODE WORKING

var refreshIntervalId;

function showMap() {
    document.getElementById('divMap').style.display = '';
    refreshIntervalId = setInterval(function () { updateMapTimer() }, 300);
}

function updateMapTimer() {
    clearInterval(refreshIntervalId);
    var map = new google.maps.Map(....
    ....
}

그것이 더 편리한 방법인지 모르겠지만 작동합니다!

jQuery를 사용하면 이와 같은 작업을 수행 할 수 있습니다. 이를 통해 Umbraco CMS에서 Google 맵을 즉시 볼 수없는 탭에로드 할 수있었습니다.

function waitForVisibleMapElement() {
    setTimeout(function () {
        if ($('#map_canvas').is(":visible")) {
            // Initialize your Google Map here
        } else {
            waitForVisibleMapElement();
        };
    }, 100);
};

waitForVisibleMapElement();

내 솔루션은 매우 간단하고 효율적입니다.

HTML

<div class="map-wrap"> 
  <div id="map-canvas"></div>
</div>

CSS

.map-wrap{
  height:0;
  width:0;
  overflow:hidden;
}

jquery

$('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map
$('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map

또는 gmaps.js 를 사용하는 경우 다음을 호출하십시오.

map.refresh();

div가 표시 될 때

원래 질문은 페이지의 숨겨진 div에서 초기화 된 맵과 관련이 있다고 생각합니다. 표시 상태에 관계없이 초기화 된 후 문서가 준비되면 숨겨진 div의 맵 크기를 조정하여 비슷한 문제를 해결했습니다. 제 경우에는 2 개의 맵이 있습니다. 하나는 표시되고 하나는 초기화 될 때 숨겨져 있으며 표시 될 때마다 맵을 초기화하고 싶지 않습니다. 오래된 게시물이지만 찾고있는 사람에게 도움이되기를 바랍니다.

나는 이것이 나를 위해 일하는 것을 발견했다.

숨기려고:

$('.mapWrapper')
.css({
  visibility: 'hidden',
  height: 0
});

보여주기 위해 :

    $('.mapWrapper').css({
      visibility: 'visible',
      height: 'auto'
    });

Bootstrap v3 탭에서 사용하는 경우 다음이 작동합니다.

$('a[href="#tab-location"]').on('shown.bs.tab', function(e){
    var center = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
});

여기서 tab-location맵을 포함하는 탭의 ID입니다.

John Doppelmann과 HoffZ가 지시 한 것처럼 div 표시 함수 또는 onclick 이벤트에 다음과 같이 모든 코드를 결합하십시오.

setTimeout(function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});

그것은 나를 위해 완벽하게 작동했습니다.

내 해결책은 다음과 같습니다.

CSS :

.map {
   height: 400px;
   border: #ccc solid 1px;
}

jQuery :

$('.map').width(555); // width of map canvas

숨겨진 div가 표시 된 후에 만 ​​맵이로드되는 것을 좋아하지 않았습니다. 예를 들어 회전 목마에서는 실제로 작동하지 않습니다.

이 솔루션은 숨겨진 요소에 클래스를 추가하여 숨기기를 해제하고 대신 위치 절대로 숨기고 맵을 렌더링하고 맵로드 후 클래스를 제거하는 것입니다.

부트 스트랩 회전 목마에서 테스트되었습니다.

HTML

<div class="item loading"><div id="map-canvas"></div></div>

CSS

.loading { display: block; position: absolute; }

JS

$(document).ready(function(){
    // render map //
    google.maps.event.addListenerOnce(map, 'idle', function(){
        $('.loading').removeClass('loading');
    });
}

지도를 표시하려면이 코드 줄을 사용하십시오.

               $("#map_view").show("slow"); // use id of div which you want to show.
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
                    document.body.appendChild(script);

 $("#map_view").show("slow"); // use id of div which you want to show.
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
     document.body.appendChild(script);

첫 번째 게시물. 내 googleMap div는 탭을 클릭 할 때까지 {display : none}이있는 컨테이너 div 내에있었습니다. OP와 동일한 문제가있었습니다. 이것은 나를 위해 일했다 :

google.maps.event.addDomListener(window, 'load', setTimeout(initialize, 1));

컨테이너 div 탭을 클릭하고 숨겨진 div를 표시하는 코드의 내부와 끝에이 코드를 붙이십시오. 중요한 것은 초기화를 호출하기 전에 컨테이너 div가 표시되어야한다는 것입니다.

나는 여기에 제안 된 많은 솔루션을 시도했지만 다른 페이지는 효과가 없었습니다. 이것이 당신에게 효과가 있는지 알려주세요. 감사.

div 앞에이 코드를 추가하거나 js 파일로 전달하십시오.

<script>
    $(document).on("pageshow","#div_name",function(){
       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("div_name"), myOptions);
   }


</script>

이 이벤트는 div가로드 된 후에 트리거되므로 F5를 누르지 않아도 맵 내용을 새로 고칩니다.

지도를 표시하면 주소를 지오 코딩 한 다음지도 중심을 설정합니다. 그만큼google.maps.event.trigger(map, 'resize'); 나를 위해 작동하지 않았다.

나는 map.setZoom(14);

아래 코드 :

document.getElementById('map').style.display = 'block';
var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': input.value }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker2 = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                map.setZoom(14);
                marker2.addListener('dragend', function (event) {
                    $('#lat').val(event.latLng.lat());
                    $('#lng').val(event.latLng.lng());
                });

            }
        });