cara berurusan dengan google map di dalam div tersembunyi (Gambar yang diperbarui)

saya punya halaman dan peta google di dalam div tersembunyi pada awalnya. Saya kemudian menunjukkan div setelah saya mengklik tautan tetapi hanya bagian kiri atas peta yang muncul.

saya mencoba menjalankan kode ini setelah klik:

    map0.onResize();

atau:

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

ada ide. di sini adalah gambar dari apa yang saya lihat setelah menunjukkan div dengan peta tersembunyi di dalamnya.

Baru saja mengujinya sendiri dan inilah cara saya mendekatinya. Cukup lurus ke depan, beri tahu saya jika Anda membutuhkan klarifikasi

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>

Saya mengalami masalah yang sama dan menemukan bahwa ketika menunjukkan div, panggil google.maps.event.trigger(map, 'resize');dan tampaknya menyelesaikan masalah untuk saya.

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

Jika Anda tidak memiliki peta variabel, itu harus menjadi elemen pertama (kecuali Anda melakukan sesuatu yang bodoh) di divyang berisi GMAP.

Saya memiliki peta Google di dalam tab Bootstrap, yang tidak ditampilkan dengan benar. Ini adalah perbaikan saya.

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

Cara menyegarkan peta saat Anda mengubah ukuran div Anda

Tidak cukup hanya dengan menelepon. google.maps.event.trigger(map, 'resize');Anda juga harus mengatur ulang pusat peta.

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

Cara mendengarkan acara pengubahan ukuran

Angular (ng-show atau runtuhnya ui-bootstrap)

Bind langsung ke visibilitas elemen daripada nilai yang terikat dengan ng-show, karena $ watch dapat diaktifkan sebelum ng-show diperbarui (sehingga div akan tetap tidak terlihat).

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

jQuery .show ()

Gunakan panggilan balik bawaan

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

Bootstrap 3 Modal

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

Jika Anda memiliki Google Map yang disisipkan dengan menyalin / menempelkan kode iframe dan Anda tidak ingin menggunakan Google Maps API , ini adalah solusi mudah. Cukup jalankan baris javascript berikut ketika Anda menunjukkan peta yang tersembunyi. Itu hanya mengambil kode HTML iframe dan memasukkannya di tempat yang sama, sehingga membuatnya lagi:

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

versi jQuery:

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

HTML:

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

Contoh berikut berfungsi untuk peta yang awalnya disembunyikan di 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>

Dimungkinkan juga untuk hanya memicu acara ukuran jendela asli.

Google Maps akan memuat ulang sendiri secara otomatis:

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

Saya memiliki masalah yang sama, yang google.maps.event.trigger(map, 'resize')tidak berfungsi untuk saya.

Apa yang saya lakukan adalah meletakkan timer untuk memperbarui peta setelah meletakkan 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(....
    ....
}

Saya tidak tahu apakah ini cara yang lebih mudah untuk melakukannya tetapi berhasil!

Dengan jQuery Anda bisa melakukan sesuatu seperti ini. Ini membantu saya memuat Google Map di Umbraco CMS pada tab yang tidak akan langsung terlihat.

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

waitForVisibleMapElement();

Solusi saya sangat sederhana dan efisien:

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

Atau jika Anda menggunakan gmaps.js , hubungi:

map.refresh();

ketika div Anda ditampilkan.

Saya kira pertanyaan aslinya adalah dengan peta yang diinisialisasi dalam div halaman yang tersembunyi. Saya memecahkan masalah yang sama dengan mengubah ukuran peta di div tersembunyi pada dokumen siap, setelah diinisialisasi, terlepas dari status tampilan. Dalam kasus saya, saya memiliki 2 peta, satu ditampilkan dan satu disembunyikan ketika mereka diinisialisasi dan saya tidak ingin menginisialisasi peta setiap kali ditampilkan. Itu adalah posting lama, tapi saya harap ini membantu siapa saja yang mencari.

Saya menemukan ini berfungsi untuk saya:

untuk menyembunyikan:

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

memperlihatkan:

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

Jika digunakan di dalam tab Bootstrap v3, yang berikut ini akan berfungsi:

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

dimana tab-locationID tab berisi peta.

Persis seperti yang ditunjukkan oleh John Doppelmann dan HoffZ, kumpulkan semua kode seperti di fungsi div Anda atau acara klik:

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

Ini bekerja dengan baik untuk saya

Solusi saya adalah:

CSS:

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

jQuery:

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

Saya tidak suka bahwa peta akan dimuat hanya setelah div tersembunyi terlihat. Dalam korsel, misalnya, itu tidak terlalu berhasil.

Solusi saya ini adalah menambahkan kelas ke elemen tersembunyi untuk menyembunyikannya dan menyembunyikannya dengan posisi absolut, lalu merender peta, dan menghapus kelas setelah memuat peta.

Diuji dalam Bootstrap Carousel.

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

gunakan baris kode ini ketika Anda ingin menampilkan peta.

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

Pos pertama. GoogleMap google saya berada dalam div kontainer dengan {display: none} hingga tab diklik. Punya masalah yang sama dengan OP. Ini bekerja untuk saya:

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

Simpan kode ini di dalam dan di akhir kode Anda di mana tab div kontainer Anda diklik dan mengungkapkan div tersembunyi Anda. Yang penting adalah bahwa div kontainer Anda harus terlihat sebelum inisialisasi dapat dipanggil.

Saya mencoba sejumlah solusi yang diusulkan di sini dan halaman lain dan mereka tidak berhasil untuk saya. Beri tahu saya jika ini cocok untuk Anda. Terima kasih.

Tambahkan kode ini sebelum div atau berikan ke file 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>

Acara ini akan dipicu setelah div dimuat sehingga akan menyegarkan konten peta tanpa harus menekan F5

Setelah menunjukkan peta saya melakukan geocoding alamat kemudian mengatur pusat peta. Itu google.maps.event.trigger(map, 'resize');tidak bekerja untuk saya.

Saya harus menggunakan a map.setZoom(14);

Kode di bawah ini:

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

            }
        });