Làm thế nào để đối phó với google map bên trong một div ẩn (Ảnh cập nhật)

Tôi có một trang và bản đồ google nằm trong một div ẩn lúc đầu. Sau đó tôi hiển thị div sau khi tôi nhấp vào một liên kết nhưng chỉ phía trên bên trái của bản đồ hiển thị.

tôi đã thử chạy mã này sau khi nhấp chuột:

    map0.onResize();

hoặc là:

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

bất kỳ ý tưởng. đây là hình ảnh của những gì tôi thấy sau khi hiển thị div với bản đồ ẩn trong đó.

Chỉ cần tự mình kiểm tra và đây là cách tôi tiếp cận nó. Khá thẳng về phía trước, cho tôi biết nếu bạn cần làm rõ

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>

Javascript

<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>

Tôi đã có cùng một vấn đề và phát hiện ra rằng khi hiển thị div, hãy gọi google.maps.event.trigger(map, 'resize');và nó xuất hiện để giải quyết vấn đề cho tôi.

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

Nếu bạn không có sẵn bản đồ biến, thì đó phải là yếu tố đầu tiên (trừ khi bạn làm điều gì đó ngu ngốc) trong divđó có chứa GMAP.

Tôi đã có một bản đồ Google bên trong tab Bootstrap, không hiển thị chính xác. Đây là sửa chữa của tôi.

// 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
});

Cách làm mới bản đồ khi bạn thay đổi kích thước div

Chỉ gọi là không đủ google.maps.event.trigger(map, 'resize');Bạn cũng nên đặt lại trung tâm bản đồ.

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

Làm thế nào để lắng nghe sự kiện thay đổi kích thước

Angular (ng-show hoặc ui-bootstrap sụp đổ)

Liên kết trực tiếp với khả năng hiển thị của phần tử thay vì giá trị được liên kết với ng-show, bởi vì đồng hồ $ có thể kích hoạt trước khi ng-show được cập nhật (vì vậy div sẽ vẫn ở chế độ ẩn).

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

jQuery .show ()

Sử dụng gọi lại tích hợp

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

Bootstrap 3 phương thức

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

Nếu bạn có Google Map được chèn bằng cách sao chép / dán mã iframe và bạn không muốn sử dụng Google Maps API , đây là một giải pháp dễ dàng. Chỉ cần thực hiện dòng javascript sau khi bạn hiển thị bản đồ ẩn. Nó chỉ lấy mã HTML iframe và chèn nó vào cùng một vị trí, do đó, nó sẽ hiển thị lại:

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

Phiên bản jQuery:

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

HTML:

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

Ví dụ sau hoạt động cho một bản đồ ban đầu được ẩn trong tab 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>

Cũng có thể chỉ kích hoạt sự kiện thay đổi kích thước cửa sổ gốc.

Google Maps sẽ tự động tải lại:

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

Tôi có cùng một vấn đề, google.maps.event.trigger(map, 'resize')đã không làm việc cho tôi.

Những gì tôi đã làm là đặt một bộ đếm thời gian để cập nhật bản đồ sau khi hiển thị 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(....
    ....
}

Tôi không biết nếu đó là cách thuận tiện hơn để làm điều đó nhưng nó hoạt động!

Với jQuery bạn có thể làm một cái gì đó như thế này. Điều này giúp tôi tải Google Map trong Umbraco CMS trên một tab không thể nhìn thấy ngay lập tức.

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

waitForVisibleMapElement();

Giải pháp của tôi rất đơn giản và hiệu quả:

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

Hoặc nếu bạn sử dụng gmaps.js , hãy gọi:

map.refresh();

khi div của bạn được hiển thị.

Tôi đoán câu hỏi ban đầu là với một bản đồ được initalized trong một div ẩn của trang. Tôi đã giải quyết một vấn đề tương tự bằng cách thay đổi kích thước bản đồ trong div ẩn khi tài liệu sẵn sàng, sau khi nó được khởi tạo, bất kể trạng thái hiển thị của nó. Trong trường hợp của tôi, tôi có 2 bản đồ, một bản đồ được hiển thị và một bản đồ bị ẩn khi chúng được khởi tạo và tôi không muốn khởi tạo bản đồ mỗi khi nó được hiển thị. Đây là một bài viết cũ, nhưng tôi hy vọng nó sẽ giúp bất cứ ai đang tìm kiếm.

Tôi đã tìm thấy cái này để làm việc cho tôi:

trốn:

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

để hiển thị:

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

Nếu được sử dụng bên trong các tab Bootstrap v3, các thao tác sau sẽ hoạt động:

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

nơi tab-locationlà ID của tab chứa đồ.

Giống như John Doppelmann và HoffZ đã chỉ ra, hãy đặt tất cả các mã lại với nhau như sau trong chức năng hiển thị div hoặc sự kiện onclick của bạn:

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

Nó làm việc hoàn hảo cho tôi

Giải pháp của tôi là:

CSS:

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

jQuery:

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

Tôi không thích rằng bản đồ sẽ chỉ tải sau khi div ẩn đã hiển thị. Ví dụ, trong băng chuyền, điều đó không thực sự hiệu quả.

Giải pháp này của tôi là thêm lớp vào thành phần ẩn để bỏ ẩn nó và ẩn nó với vị trí tuyệt đối thay vào đó, sau đó hiển thị bản đồ và xóa lớp sau khi tải bản đồ.

Đã thử nghiệm trong Bootstrap Carousel.

HTML

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

CSS

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

Mã não

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

sử dụng dòng mã này khi bạn muốn hiển thị bản đồ.

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

Bài viết đầu tiên. Div googleMap của tôi nằm trong div div container với {display: none} cho đến khi tab được nhấp. Có vấn đề tương tự như OP. Điều này làm việc cho tôi:

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

Dán mã này vào bên trong và ở cuối mã của bạn, nơi tab div container của bạn được nhấp và hiển thị div ẩn của bạn. Điều quan trọng là div container của bạn phải được hiển thị trước khi khởi tạo có thể được gọi.

Tôi đã thử một số giải pháp được đề xuất ở đây và các trang khác và chúng không hiệu quả với tôi. Hãy cho tôi biết, nếu việc này giúp ích cho bạn. Cảm ơn.

Thêm mã này trước div hoặc chuyển nó vào tệp 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>

Sự kiện này sẽ được kích hoạt sau khi tải div, vì vậy nó sẽ làm mới nội dung bản đồ mà không cần phải nhấn F5

Khi hiển thị bản đồ, tôi đang mã hóa địa chỉ rồi đặt trung tâm bản đồ. Việc google.maps.event.trigger(map, 'resize');này không hiệu quả với tôi.

Tôi đã phải sử dụng một map.setZoom(14);

Mã dưới đây:

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

            }
        });