วิธีจัดการกับแผนที่ google ภายใน div ที่ซ่อนอยู่ (ภาพที่อัปเดต)

ฉันมีเพจและแผนที่ Google อยู่ใน div ที่ซ่อนไว้ในตอนแรก จากนั้นฉันจะแสดง div หลังจากที่ฉันคลิกลิงก์ แต่มีเพียงด้านบนซ้ายของแผนที่เท่านั้นที่ปรากฏขึ้น

ฉันพยายามให้รหัสนี้ทำงานหลังจากคลิก:

    map0.onResize();

หรือ:

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

ความคิดใด ๆ นี่คือภาพของสิ่งที่ฉันเห็นหลังจากแสดง div พร้อมกับแผนที่ที่ซ่อนอยู่ในนั้น

เพิ่งทดสอบด้วยตัวเองและนี่คือวิธีที่ฉันเข้าหามัน ตรงไปตรงมาโปรดแจ้งให้เราทราบหากคุณต้องการคำชี้แจงใด ๆ

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>

ฉันประสบปัญหาเดียวกันและพบว่าเมื่อแสดง div โทรgoogle.maps.event.trigger(map, 'resize');และดูเหมือนว่าจะแก้ไขปัญหาให้ฉันได้

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

หากคุณไม่มีแผนที่ตัวแปรควรเป็นองค์ประกอบแรก (เว้นแต่คุณจะทำอะไรโง่ ๆ ) ในdivที่มี GMAP

ฉันมีแผนที่ Google อยู่ในแท็บ Bootstrap ซึ่งแสดงไม่ถูกต้อง นี่คือการแก้ไขของฉัน

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

วิธีฟังเหตุการณ์การปรับขนาด

Angular (การยุบตัวของ ng-show หรือ ui-bootstrap)

เชื่อมโยงโดยตรงกับการมองเห็นขององค์ประกอบแทนที่จะเป็นค่าที่ผูกไว้กับ ng-show เนื่องจาก $ watch สามารถเริ่มทำงานได้ก่อนที่จะอัปเดต ng-show (ดังนั้น div จะยังคงมองไม่เห็น)

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

jQuery .show ()

ใช้การโทรกลับในตัว

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

Bootstrap 3 Modal

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

หากคุณมี Google Map แทรกโดยการคัดลอก / วางโค้ด iframe และคุณไม่ต้องการใช้ Google Maps APIนี่เป็นวิธีง่ายๆ เพียงดำเนินการตามบรรทัดจาวาสคริปต์ต่อไปนี้เมื่อคุณแสดงแผนที่ที่ซ่อนอยู่ เพียงแค่ใช้โค้ด HTML ของ iframe และแทรกลงในที่เดียวกันดังนั้นจึงแสดงผลอีกครั้ง:

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

ตัวอย่างต่อไปนี้ใช้ได้กับแผนที่ที่ซ่อนอยู่ในแท็บ 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>

นอกจากนี้ยังเป็นไปได้ที่จะทริกเกอร์เหตุการณ์ปรับขนาดหน้าต่างดั้งเดิม

Google Maps จะโหลดตัวเองใหม่โดยอัตโนมัติ:

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

ฉันมีปัญหาเดียวกันปัญหาgoogle.maps.event.trigger(map, 'resize')นี้ไม่ได้ผลสำหรับฉัน

สิ่งที่ฉันทำคือตั้งเวลาในการอัปเดตแผนที่หลังจากวาง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(....
    ....
}

ฉันไม่รู้ว่ามันเป็นวิธีที่สะดวกกว่าหรือเปล่า แต่ได้ผล!

ด้วย jQuery คุณสามารถทำสิ่งนี้ได้ สิ่งนี้ช่วยฉันโหลด Google Map ใน Umbraco CMS บนแท็บที่ไม่สามารถมองเห็นได้จากทันที

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

waitForVisibleMapElement();

โซลูชันของฉันง่ายและมีประสิทธิภาพมาก:

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

หรือถ้าคุณใช้gmaps.jsโทร:

map.refresh();

เมื่อ div ของคุณปรากฏขึ้น

ฉันเดาว่าคำถามเดิมมาจากแผนที่ที่มีการระบุไว้ใน div ที่ซ่อนอยู่ของหน้า ฉันแก้ไขปัญหาที่คล้ายกันโดยการปรับขนาดแผนที่ใน div ที่ซ่อนอยู่เมื่อเอกสารพร้อมหลังจากเริ่มต้นแล้วโดยไม่คำนึงถึงสถานะการแสดงผล ในกรณีของฉันฉันมีแผนที่ 2 แผนที่แผนที่หนึ่งถูกแสดงและอีกแผนที่ถูกซ่อนไว้เมื่อเริ่มต้นและฉันไม่ต้องการเริ่มต้นแผนที่ทุกครั้งที่มีการแสดง เป็นโพสต์เก่า แต่ฉันหวังว่ามันจะช่วยทุกคนที่กำลังมองหา

ฉันพบว่าสิ่งนี้ใช้ได้ผลสำหรับฉัน:

เพื่อซ่อน:

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

เพื่อที่จะแสดง:

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

หากใช้ภายในแท็บ Bootstrap 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เป็นรหัสของแผนที่ที่มีแท็บ

เช่นเดียวกับที่ John Doppelmann และ HoffZ ระบุให้ใส่รหัสทั้งหมดเข้าด้วยกันดังนี้ในฟังก์ชันการแสดง div หรือเหตุการณ์ onclick:

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

มันทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน

วิธีแก้ปัญหาของฉันคือ:

CSS:

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

jQuery:

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

ฉันไม่ชอบที่แผนที่จะโหลดหลังจากที่เห็น div ที่ซ่อนอยู่เท่านั้น ตัวอย่างเช่นในภาพหมุนนั้นใช้ไม่ได้จริง

นี่คือวิธีแก้ปัญหาของฉันคือการเพิ่มคลาสให้กับองค์ประกอบที่ซ่อนอยู่เพื่อยกเลิกการซ่อนและซ่อนด้วยตำแหน่งสัมบูรณ์แทนจากนั้นแสดงแผนที่และลบคลาสออกหลังจากโหลดแผนที่

ทดสอบใน 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');
    });
}

ใช้รหัสบรรทัดนี้เมื่อคุณต้องการแสดงแผนที่

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

โพสต์แรก googleMap div ของฉันอยู่ภายในคอนเทนเนอร์ div ที่มี {display: none} จนกระทั่งคลิกแท็บ มีปัญหาเดียวกันกับ OP. สิ่งนี้ใช้ได้ผลสำหรับฉัน:

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

ติดรหัสนี้ไว้ด้านในและท้ายโค้ดของคุณที่แท็บ div คอนเทนเนอร์ของคุณถูกคลิกและแสดง div ที่ซ่อนอยู่ สิ่งสำคัญคือต้องมองเห็นคอนเทนเนอร์ div ของคุณก่อนที่จะเรียกเริ่มต้น

ฉันลองใช้วิธีแก้ปัญหาหลายอย่างที่เสนอไว้ที่นี่และหน้าอื่น ๆ แต่ก็ไม่ได้ผลสำหรับฉัน โปรดแจ้งให้เราทราบหากวิธีนี้เหมาะกับคุณ ขอบคุณ

เพิ่มรหัสนี้ก่อน div หรือส่งต่อไปยังไฟล์ 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>

เหตุการณ์นี้จะถูกทริกเกอร์หลังจากที่ div โหลดดังนั้นมันจะรีเฟรชเนื้อหาแผนที่โดยไม่ต้องกด F5

เมื่อแสดงแผนที่ฉันกำลังระบุตำแหน่งทางภูมิศาสตร์จากนั้นตั้งค่าศูนย์กลางแผนที่ 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());
                });

            }
        });