Вставить карту google неправильно отображается до изменения размера веб-страницы.

Я пытаюсь отобразить карту на своей веб-странице, чтобы получить от нее координаты. Он отлично работает, я могу перетащить маркер и получить координаты в поле ввода.

Но моя проблема возникает, когда я загружаю веб-страницу. Все хорошо отображается, но карта, здесь вы можете увидеть, как отображается карта:

Но если в этот момент я изменю размер веб-страницы, я имею в виду, если бы это был полный экран, поставьте ее наполовину. Или сделайте его немного большим или меньшим, если бы он был просто частью экрана. Затем вы увидите правильную карту:

(Это не то место, я знаю. Я взял изображение из 2 перезагрузок)

Я создаю веб-страницу в HTML, но я называю это, как будто это разные веб-страницы. Когда вы загружаете индекс, вы получаете кнопку с этим

href:<a href="#openMap">

И, показанная часть будет:

<div data-role="page"  id="openMap" data-theme="e">
<div data-role="header" data-id="fixedNav" data-position="fixed">
    blablabla
    <div data-role="content">
        <form action="">
            <div id="map_canvas" style="width:500px; height:300px"></div>
            blablabla

И все divs, формы... правильно закрыты. У меня есть много полей ввода и полей, которые я не добавил здесь.

Затем на моей карте google script у меня есть следующее:

var map;
function initializeNewMap() {
  var myLatlng = new google.maps.LatLng(43.462119485,-3.809954692009);

  var myOptions = {
     zoom: 14,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  var marker = new google.maps.Marker({
      draggable: true,
      position: myLatlng, 
      map: map,
      title: "Your location"
  });

}

Но я понятия не имею, почему мне нужно изменить размер. Это способ решить эту проблему?

EDIT: я добавляю дополнительную информацию:

Я называю часть веб-страницы, которая имеет такую карту:

$(document).on("pageinit", '#openMap', function() {

Я попытался поставить

google.maps.event.trigger(map, 'resize');

сразу после него, но ничего не происходит.

РЕШЕНИЕ:

Я нашел решение в другом вопросе (Загрузка Google Maps v3 частично в верхнем левом углу, событие изменения размера не работает, сообщение Яна Девлина):

Как сказал один из пользователей, мне нужно изменить размер карты. Но эта линия не работает. Я добавил этот код в конце функции инициализации:

google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
});

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

Ответ 1

Я тоже столкнулся с этой проблемой, я решил ее, вызывая событие Google resize.

google.maps.event.trigger(map, 'resize');

Обновление:

var map;
function initializeNewMap() {
 // add your code
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  google.maps.event.trigger(map, 'resize');
}

Надеюсь, вы поймете.

Ответ 2

У меня была аналогичная проблема, но вы не могли видеть какую-либо карту (весь ящик был серым).

Для меня это решило, что div, содержащий карту, начинался как скрытый, используя

display:none;

Если вы используете

visibility:hidden;

Div сохраняет свой размер, пока он все еще отображается как скрытый, поэтому карта при инициализации использует правильную высоту и ширину, а не 0 значений

Надеюсь, это поможет!

Ответ 3

Если вы используете помощники макета на основе JavaScript (например, Foundation Equalizer), вам необходимо убедиться, что контейнер карты имеет окончательный размер перед вами загрузите карту, чтобы вы не получили печально известную серо-карту, а некоторые атрибуты, такие как center работали, как ожидалось, или используйте сторонние события подключаемого модуля, чтобы вызвать пользовательский обратный вызов, который исправляет карту. Например:.

var map = new google.maps.Map(/*...*/);
$(document).on("after-height-change.fndtn.equalizer", function(){
    google.maps.event.trigger(map, 'resize');
});

Ответ 4

Моя карта была скрыта в вкладке Twitter Bootstrap, и поэтому не было видно, когда карта была инициализирована, поэтому мне нужно было изменить размер когда вкладка была выбрана так:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {                 
    google.maps.event.trigger(map, 'resize');
})

Ответ 5

Как это должно быть исправлено:

Вам необходимо инициализировать карту после того, как контейнер (где вы разместите карту) станет видимым,

Помните, что загрузка и видимость не одинаковы, вам нужна видимость.

Например, у меня много вкладок, а последняя вкладка содержит карту, Я исправил эту проблему:

$('#map-tab').click(function() {
    // init map
});

Здесь я сначала убедился, что контейнер получает видимость (поскольку щелчок по этому элементу показывает, что раздел содержит карту), затем инициализируется карта

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