gizli bir div içinde google haritasıyla nasıl başa çıkılır (Güncellenen resim)

Bir sayfam var ve bir google haritam ilk başta gizli bir div içinde. Daha sonra bir bağlantıya tıkladıktan sonra div'i gösteriyorum ancak haritanın yalnızca sol üst kısmı görünüyor.

Bu kodun tıklamadan sonra çalıştırılmasını denedim:

    map0.onResize();

veya:

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

herhangi bir fikir. Burada, içinde gizli harita olan div'i gösterdikten sonra gördüğüm şeyin bir resmi var.

Sadece kendim test ettim ve işte böyle yaklaştım. Oldukça basit, herhangi bir açıklamaya ihtiyacınız olursa bana bildirin

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>

Aynı sorunu yaşıyordum ve div'i gösterdiğinde, aradığımı google.maps.event.trigger(map, 'resize');ve sorunun benim için çözüldüğünü keşfettim .

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

Değişken haritanız yoksa, divGMAP'yi içeren ilk öğe (aptalca bir şey yapmadıysanız) olmalıdır.

Bir Bootstrap sekmesinin içinde düzgün görüntülenmeyen bir Google haritam vardı. Bu benim fikrimdi.

// 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'inizi yeniden boyutlandırdığınızda haritayı nasıl yenileyebilirsiniz?

Sadece aramak yeterli değil google.maps.event.trigger(map, 'resize');Haritanın merkezini de sıfırlamalısınız.

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

Yeniden boyutlandırma etkinliği nasıl dinlenir

Açısal (ng-show veya ui-bootstrap daraltması)

Ng-show'a bağlı değerden ziyade doğrudan elemanın görünürlüğüne bağlanın, çünkü $ watch, ng-show güncellenmeden önce tetiklenebilir (böylece div hala görünmez olacaktır).

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

jQuery .show ()

Yerleşik geri aramayı kullanın

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

Bootstrap 3 Modal

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

İframe kodunu kopyalayıp / yapıştırarak eklenen bir Google Haritanız varsa ve Google Haritalar API'sini kullanmak istemiyorsanız , bu kolay bir çözümdür. Gizli haritayı gösterdiğinizde aşağıdaki javascript satırını çalıştırın. Yalnızca iframe HTML kodunu alıp aynı yere ekler, böylece yeniden oluşturur:

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

jQuery sürümü:

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

HTML:

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

Aşağıdaki örnek, başlangıçta bir Bootstrap 3 sekmesinde gizlenmiş bir harita için çalışır:

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

Yalnızca yerel pencere yeniden boyutlandırma olayını tetiklemek de mümkündür.

Google Haritalar kendini otomatik olarak yeniden yükleyecektir:

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

Aynı sorunu yaşadım, google.maps.event.trigger(map, 'resize')benim için çalışmıyordu.

Yaptığım şey, haritayı görünür hale getirdikten sonra haritayı güncellemek için bir zamanlayıcı koymaktı 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(....
    ....
}

Bunu yapmanın daha uygun bir yolu mu bilmiyorum ama işe yarıyor!

JQuery ile böyle bir şey yapabilirsiniz. Bu, Umbraco CMS'de hemen görünmeyen bir sekmede bir Google Haritası yüklememe yardımcı oldu.

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

waitForVisibleMapElement();

Çözümüm çok basit ve etkili:

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

Veya gmaps.js kullanıyorsanız şu numarayı arayın:

map.refresh();

div'iniz gösterildiğinde.

Sanırım asıl soru, sayfanın gizli bir bölümünde büyük harfle yazılmış bir haritayla ilgili. Görüntü durumuna bakılmaksızın, başlatıldıktan sonra belge hazır olduktan sonra gizli div'deki haritayı yeniden boyutlandırarak benzer bir sorunu çözdüm. Benim durumumda, 2 haritam var, biri gösteriliyor ve biri başlatıldıklarında gizli ve her gösterildiğinde bir haritayı başlatmak istemiyorum. Eski bir gönderi, ama umarım bakan herkese yardımcı olur.

Bunu benim için çalışacak şekilde buldum:

gizlemek için:

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

göstermek için:

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

Bootstrap v3 sekmelerinde kullanılırsa, aşağıdakiler çalışmalıdır:

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

tab-locationharitayı içeren sekmenin kimliği nerede .

Tıpkı John Doppelmann ve HoffZ'un belirttiği gibi, tüm kodu div gösterme işlevi veya onclick olayında aşağıdaki gibi bir araya getirin:

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

Benim için mükemmel çalıştı

Benim çözümüm şuydu:

CSS:

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

jQuery:

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

Haritanın yalnızca gizli div görünür olduktan sonra yüklenmesini istemedim. Örneğin bir atlıkarınca, bu gerçekten işe yaramaz.

Bu benim çözümüm, gizli öğeyi göstermek ve bunun yerine mutlak konumla gizlemek için gizli öğeye sınıf eklemek, ardından haritayı işlemek ve harita yüklendikten sonra sınıfı kaldırmaktır.

Bootstrap Carousel'de test edilmiştir.

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

Haritayı göstermek istediğinizde bu kod satırını kullanı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);

İlk gönderi. GoogleMap div, sekme tıklanana kadar {display: none} içeren bir kapsayıcı div içindeydi. OP ile aynı sorunu yaşadı. Bu benim için çalıştı:

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

Bu kodu kodunuzun içine ve sonuna kapsayıcı div sekmenizin tıklandığı yere yapıştırın ve gizli div'inizi ortaya çıkarın. Önemli olan, kapsayıcı div'inizin başlatılmadan önce görünür olması gerektiğidir.

Burada ve diğer sayfalarda önerilen bir dizi çözümü denedim ve benim için işe yaramadı. Bunun sizin için işe yarayıp yaramadığını bana bildirin. Teşekkürler.

Bu kodu div'den önce ekleyin veya bir js dosyasına aktarın:

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

Bu etkinlik, div yüklendikten sonra tetiklenecek ve böylece F5 tuşuna basmak zorunda kalmadan harita içeriğini yenileyecektir.

Haritayı gösterdikten sonra bir adrese coğrafi kod yazıyorum ve ardından haritaların merkezini ayarlıyorum. google.maps.event.trigger(map, 'resize');Benim için işe yaramadı.

Kullanmak zorunda kaldım map.setZoom(14);

Aşağıdaki kod:

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

            }
        });