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


127

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.teks alternatif


Sudah ada sejumlah pertanyaan di SO tentang ini, termasuk tampilan peta Google dari area tersembunyi
Matt Ball

@ Mat Ball - seperti yang diperbarui, saya mencoba menambahkan acara mengubah ukuran di sana tetapi masih tidak berfungsi
leora

@Matt Ball - saya berhasil menjalankannya. setelah saya membuat objek google map saya menyimpannya dalam variabel global sehingga saya bisa merujuknya lagi nanti dan memanggil ukuran sekarang sepertinya berfungsi. Saya mencoba untuk tidak harus membuat ulang objek peta setiap kali saya menunjukkannya karena saya mengizinkan orang untuk beralih bolak-balik.
leora

@ooo itu sangat sederhana dengan kode di bawah ini. Yang perlu Anda tambahkan adalah kondisi if untuk memeriksa apakah objek peta telah diinisialisasi atau belum. Ini adalah kode tidak tertulis yang ditulis untuk mengatasi masalah awal Anda yang memuat peta dengan benar.
Philar

@philar - yup. . terima kasih disini . demikian upvote :). Either way saya perlu menyimpan variabel di tingkat global untuk menghindari menginisialisasi ulang
leora

Jawaban:


103

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>

Jadi pada dasarnya Anda hanya melakukan instanisasi peta saat div ditampilkan? Apakah ada cara untuk melakukan ini sehingga objek peta hanya instan satu kali (pada pemuatan halaman)?
lucas

1
Saya juga bisa menyarankan penundaan setTimeout untuk memanggil fungsi kedua jika Anda memanggil show () untuk memberikan waktu untuk mengubah ukuran.
Eric.18

126

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


64
Untuk menjaga pusat asli peta tepat setelah pengubahan ukuran, pertimbangkan untuk memperpanjang pernyataan pengubahan ukuran dengan cara ini: var center = map.getCenter (); google.maps.event.trigger (map, 'resize'); map.setCenter (tengah);
John Doppelmann

10
Tidak yakin mengapa, tapi saya perlu membungkus solusi di dalam setTimeout kecil untuk membuatnya berfungsi: setTimeout (function () {google.maps.event.trigger (map, 'resize')}, 100);
HoffZ

@ JohnDoppelmann Terima kasih atas tipnya! Itu tidak intuitif mengapa tidak mempertahankan pusat, atau bagaimana memaksanya kembali.
Noah Duncan

Atur pusat peta dan tingkat zoom lagi setelah memicu acara 'mengubah ukuran'. Untuk info lebih lanjut, lihat: code.google.com/p/gmaps-api-issues/issues/detail?id=1448
ruhong

@HoffZ ini mungkin karena kode pengubahan ukuran Anda diaktifkan sebelum efek yang ditampilkan, batas waktu menunda hingga pertunjukan dilakukan, maka perubahan ukuran dapat membuatnya berfungsi. Anda mungkin dapat mencapai efek yang sama mengubah urutan kode eksekusi Anda untuk memastikan bahwa ketika menjalankan acara, pertunjukan div dieksekusi sebelum mengubah ukuran peta.
Bardo

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


Apakah Anda yakin dapat memicu elemen pada div alih-alih objek google.map.Map ?
Salman A

@SalmanA - Baru saja memeriksa ini & itu berhasil untuk saya (meskipun Peta tampaknya memiliki Pusat baru). Dari penelitian sebelumnya saya tidak tahu ini mungkin baik jadi pujian untuk CSN
Hal

CS N ... Ini bekerja untuk saya, tapi, itu meninggalkan posisi tengah di tempat yang salah. Peta saya mulai seperti tangkapan layar OP, dan ini seperti tengah: berpusat di sudut kiri atas map_canvas saya. Pikiran tentang cara menggambarnya berpusat?
Kirk Ross

13

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

1
Saya harus mengganti 'ditampilkan' menjadi 'ditampilkan.bs.tab' agar ini berfungsi untuk peta yang disembunyikan di tab tidak aktif. Terima kasih
Nicola

Saya menggunakan SmartWizard 4 dan ini adalah satu-satunya solusi yang bekerja untuk saya dan bekerja dengan sangat baik! Aku berubah 'a[href="#profileTab"]'untuk step-2yang merupakan nama dari DIV yang berisi DIV peta.
GeospatialPython.com

7

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

Metode bootstrap 3 modal Anda mengubah masalah saya dengan sempurna sedangkan sebagian besar saran lainnya tidak. Terima kasih!
BrianLegg

6

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>

2
Solusi terbaik untuk siapa saja yang tidak memuat Google Map JS tetapi hanya menggunakan iframe dengan src urlhttps://www.google.com/maps/embed/v1/place?..
gsinha

6

Dimungkinkan juga untuk hanya memicu acara ukuran jendela asli.

Google Maps akan memuat ulang sendiri secara otomatis:

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

5

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!


gunakan setTimeout untuk menunggu sekali.
Joe Austin

4

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

Ini adalah satu-satunya solusi yang bekerja untuk saya dan masalah saya. Saya memiliki peta google di dalam tab Materialize.CSS yang tidak menunjukkan peta, tetapi hanya menunjukkan latar belakang abu-abu dengan hanya Marker dan logo Google di sudut kiri. Saya mengatur div konten tab untuk menginisialisasi peta ketika terlihat, dan berfungsi dengan baik. Contoh
Gorgon_Union

3

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


2

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.


2

Saya menemukan ini berfungsi untuk saya:

untuk menyembunyikan:

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

memperlihatkan:

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

2

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.


2

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


0

Solusi saya adalah:

CSS:

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

jQuery:

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

0

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

0

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

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

0

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.


0

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


0

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

            }
        });

-1

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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.