Как иметь дело с google-картой внутри скрытого div (обновленное изображение)

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

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

    map0.onResize();

или

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

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

Ответ 1

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

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>

Ответ 2

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

Ответ 3

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

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

Ответ 4

У меня была карта 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
});

Ответ 5

Как обновить карту при изменении размера div

Недостаточно просто позвонить google.maps.event.trigger(map, 'resize'); Вы должны reset также центр карты.

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

Ответ 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(....
    ....
}

Я не знаю, если это более удобный способ сделать это, но он работает!

Ответ 7

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

Ответ 8

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

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

waitForVisibleMapElement();

Ответ 9

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

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

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

Ответ 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

Ответ 11

Или, если вы используете gmaps.js, звоните:

map.refresh();

когда отображается ваш div.

Ответ 12

Я предполагаю, что исходный вопрос касается карты, которая инициализируется в скрытом div страницы. Я решил аналогичную проблему, изменив размер карты в скрытом div на готовый документ после его инициализации, независимо от статуса отображения. В моем случае у меня есть 2 карты, один показан и один скрыт, когда они инициализированы, и я не хочу, чтобы каждая карта отображалась каждый раз. Это старая должность, но я надеюсь, что это поможет любому, кто смотрит.

Ответ 13

При использовании внутри вкладок 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 - идентификатор закладки, содержащей карту.

Ответ 14

Так же, как указали Джон Доппельманн и HoffZ, поместите весь код в следующем виде: или

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

Он отлично работал у меня

Ответ 15

Я нашел, что это работает для меня:

чтобы скрыть:

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

чтобы показать:

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

Ответ 16

Мое решение было:

CSS

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

JQuery

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

Ответ 17

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

Это мое решение состоит в том, чтобы добавить класс к скрытому элементу, чтобы отобразить его и скрыть его с помощью абсолютной позиции, а затем отобразить карту и удалить класс после загрузки карты.

Протестировано в карусели Bootstrap.

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

Ответ 18

используйте эту строку кодов, когда вы хотите отобразить карту.

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

Ответ 19

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

Ответ 20

Первое сообщение. Мой div googleMap находился в контейнере div с {display: none} до тех пор, пока не будет нажата кнопка. Имел ту же проблему, что и ОП. Это сработало для меня:

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

Придерживайтесь этого кода внутри и в конце вашего кода, где нажимается вкладка div контейнера и отображается ваш скрытый div. Важно то, что ваш контейнер div должен быть видимым до того, как вызывается инициализация.

Я попробовал ряд предлагаемых здесь решений и других страниц, и они не сработали для меня. Дайте мне знать, если это сработает для вас. Спасибо.

Ответ 21

Добавьте этот код перед 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

Ответ 22

После отображения карты я геокодирую адрес, а затем устанавливаю центр карт. 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());
                });

            }
        });

Ответ 23

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>