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

Question

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

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

    map0.onResize();

или:

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

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

Answer 1

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

map.refresh();

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

Answer 2

Так же, как указали Джон Доппельманн и HoffZ, соберите весь код, как показано в вашей функции показа div или событии onclick:

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

Это прекрасно сработало для меня

Answer 3

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

Answer 4

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

Answer 5

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

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

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

показать:

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

Answer 6

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

            }
        });

Answer 7

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

Answer 8

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>

Answer 9

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

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

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

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

Answer 10

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