숨겨진 요소 내부에 Google 지도를 로드하는 방법

숨겨진 요소 내부에 Google 지도를 로드하는 방법

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

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

map0.onResize();

또는:

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

어떻게 해야 하나요?

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

저도 같은 문제를 겪고 있었는데 디브를 보여줄 때, 전화를 하는 것을 발견했습니다.google.maps.event.trigger(map, 'resize');나를 위해 그 문제를 해결하는 것처럼 보였습니다.

방금 제가 직접 테스트를 해봤는데 제가 접근한 방법은 이렇습니다.그것은 꽤 간단합니다.

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>

사용:

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

사용할 수 있는 변수 맵이 없는 경우, 해당 맵은 (바보적인 작업을 수행하지 않은 경우)divGMAP를 포함하고 있습니다.

부트스트랩 탭 안에 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
});

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

전화하는 것만으로는 충분하지 않습니다.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에 바인딩된 값보다는 요소의 가시성에 직접 바인딩합니다. ng-show가 업데이트되기 전에 $watch가 실행될 수 있기 때문입니다(div는 여전히 보이지 않습니다).

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

jQuery .show()

기본 제공 콜백 사용

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

부트스트랩 3 모달

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

기본 창의 크기 조정 이벤트를 트리거하기만 하면 됩니다.

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

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

iframe 코드를 복사/붙여넣어 삽입한 Google 지도가 있는데 Google 지도 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>
<!-- .... -->

다음 예제는 부트스트랩 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.maps.event.trigger(map, 'resize')나를 위해 일하지 않았습니다.

나는 지도를 만든 후에 업데이트하기 위해 타이머를 추가했습니다.div보이는...

// Working code

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();

또는 gmaps.js를 사용하는 경우 다음을 호출합니다.

map.refresh();

당신의 div가 보일 때.

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

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

부트스트랩 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입니다.

원래 질문은 페이지의 숨겨진 div에서 초기화된 지도와 관련된 것 같습니다.나는 표시 상태와 상관없이 초기화 후 숨겨진 div 문서에 있는 지도를 준비하여 크기를 조정함으로써 비슷한 문제를 해결했습니다.

제 경우에는 두 개의 맵이 있는데, 하나는 표시되고 하나는 초기화될 때 숨겨집니다. 맵이 표시될 때마다 맵을 초기화하고 싶지 않습니다.

John Dopelmann과 HoffZ가 지적한 것처럼, 모든 코드를 다음과 같이 div 함수나 onclick 이벤트에 결합합니다.

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

그것은 저에게 완벽하게 효과가 있었습니다.

저는 이것이 제게 도움이 된다는 것을 알게 되었습니다.

숨기기:

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

표시 방법:

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

 $("#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);

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

CSS:

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

jQuery:

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

지도를 보여주면 주소를 지오코딩하고 지도의 중심을 설정합니다.

그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());
        });
    }
});

탭을 클릭하기 전까지 내 GoogleMap div는 {display:none}의 컨테이너 div 내에 있었습니다.저도 OP와 같은 문제가 있었습니다.이것은 저에게 효과가 있었습니다.

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

컨테이너 div 탭이 클릭되는 코드의 안쪽과 끝에 이 코드를 꽂으면 숨겨진 div가 표시됩니다.중요한 것은 초기화를 호출하기 전에 컨테이너 div가 표시되어야 한다는 것입니다.

여기에 제안된 여러 가지 해결책과 다른 페이지를 시도해 보았지만 효과가 없었습니다.

지도를 표시하려면 이 코드 행을 사용합니다.

$("#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);

디바가 자바스크립트 파일에 코드를 전달하기 전에 이 코드를 추가합니다.

<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가 로드된 후에 트리거되므로 누를 필요 없이 지도 내용을 새로 고칩니다.

나는 숨겨진 디브가 보이는 이후에만 지도가 로드되는 것이 싫었습니다.예를 들어, 회전목마에서는, 그것은 실제로 효과가 없습니다.

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

부트스트랩 캐러셀에서 테스트했습니다.

HTML

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

CSS

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

자바스크립트

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

function init_map() {
  var myOptions = {
    zoom: 16,
    center: new google.maps.LatLng(0.0, 0.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
  marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0.0, 0.0)
  });
  infowindow = new google.maps.InfoWindow({
    content: 'content'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
  infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);

jQuery(window).resize(function() {
  init_map();
});
jQuery('.open-map').on('click', function() {
  init_map();
});

<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'></script>

<button type="button" class="open-map"></button>
<div style='overflow:hidden;height:250px;width:100%;'>
  <div id='gmap_canvas' style='height:250px;width:100%;'></div>
</div>

언급URL : https://stackoverflow.com/questions/4064275/how-to-load-a-google-maps-map-inside-of-a-hidden-element