как бороться с картой Google внутри скрытого div (обновленная картинка)

Question

У меня есть страница, и карта Google сначала находится внутри скрытого элемента.Затем я показываю div после того, как щелкаю ссылку, но отображается только верхний левый угол карты.

Я пытался запустить этот код после щелчка:

    map0.onResize();

или:

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

любые идеи.вот изображение того, что я вижу после показа div со скрытой картой в нем.

Answer 1

У меня возникла та же проблема, и я обнаружил, что когда вы показываете div, позвоните по номеру google.maps.event.trigger(map, 'resize');, и, похоже, я решил эту проблему.

Answer 2

Просто проверил это сам и вот как я подошел к нему.Довольно прямо, дайте мне знать, если вам нужны какие-либо разъяснения

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>

Answer 3

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

Если у вас нет доступной карты переменных, это должен быть первый элемент (если вы не сделали что-то глупое) в div, который содержит GMAP.

Answer 4

У меня на вкладке Bootstrap была карта Google, которая отображалась некорректно. Это было мое исправление.

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

Answer 5

Как обновить карту при изменении размера вашего 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);
    }
}

Как прослушать событие изменения размера

Угловой (нг-шоу или крах пользовательского интерфейса)

Привязка напрямую к видимости элемента, а не к значению, связанному с 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();
})

Answer 6

У меня была та же самая проблема, 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(....
    ....
}

Не знаю, удобнее ли это сделать, но это работает!

Answer 7

Если у вас вставлена ​​карта Google путем копирования / вставки кода iframe и вы не хотите использовать Google Maps API , это простое решение. Просто выполните следующую строку JavaScript, когда вы показываете скрытую карту. Он просто берет 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>

Answer 8

Также возможно просто вызвать событие изменения размера собственного окна.

Карты Google автоматически перезагрузятся:

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

Answer 9

С помощью jQuery вы можете сделать что-то подобное.Это помогло мне загрузить карту Google в Umbraco CMS на вкладке, которая не будет видна сразу.

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

waitForVisibleMapElement();

Answer 10

Мое решение очень простое и эффективное:

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