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

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

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

(Это не то же самое место, я знаю. Я взял изображение от 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

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

Затем в моем скрипте Google Map у меня есть это:

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

}

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

РЕДАКТИРОВАТЬ: Я добавляю больше информации:

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

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

Поэтому он вызывается только после показа карты.