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

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

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

    map0.onResize();

или:

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

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

126
google-maps google-maps-api-3 jquery

23 ответов

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

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

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

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

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

26

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

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

как прослушать событие resize

угловой (ng-show или UI-bootstrap collapse)

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

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

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

5

если у вас есть карта 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>
5

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

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

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

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

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

waitForVisibleMapElement();
4

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

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
3

или gmaps, достаточно.js звоните:

map.refresh();

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

3

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

2

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

скрывать:

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

показать:

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

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

2

как указывали Джон Доппельман и Хоффц, поместите весь код вместе следующим образом в div, показывая функцию или событие onclick:

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

это отлично сработало для меня

2

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

CSS:

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

jQuery:

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

мне не понравилось, что карта загрузится только после того, как скрытый 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');
    });
}
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
 $("#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

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

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

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

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

0

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

0

при предъявлении карты я геокодировании адреса, то установка центра карты. The 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());
                });

            }
        });
0

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