Estou tentando exibir um mapa na minha página da Web para obter coordenadas dele. Funciona bem, posso arrastar e soltar um marcador e obter coordenadas nas caixas de entrada.

Mas meu problema surge quando eu carrego a página da web. Tudo está bem exibido, mas o mapa, aqui você pode ver como o mapa é exibido:

Mas se neste momento eu redimensionar a página, quero dizer, se fosse em tela cheia, coloque metade. Ou torná-lo um pouco maior ou menor se fosse apenas uma parte da tela. Então, você verá o mapa correto:

(Não é o mesmo lugar, eu sei. Peguei a imagem de 2 recargas)

Eu crio a página da Web em HTML, mas a chamo como se fossem páginas da Web distintas. Quando você carrega o índice, você recebe um botão com este

href:<a href="#openMap">

E a parte mostrada será:

<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

E todos os divs, formulários ... devidamente fechados. Eu tenho muitas caixas de entrada e campos que eu não coloquei aqui.

Então, no meu script do google map eu tenho isto:

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

}

Mas não tenho ideia do porque preciso redimensionar. É uma maneira de resolver isso?

EDIT: eu adiciono mais informações:

Eu chamo a parte da página que tem o mapa dessa maneira:

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

Eu tentei colocar

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

logo depois, mas nada acontece.

SOLUÇÃO:

Eu encontrei a solução em outra questão (Google Maps v3 carregar parcialmente no canto superior esquerdo, o evento de redimensionamento não funcionaIan Devlin post):

Como um usuário disse aqui, preciso redimensionar o mapa. Mas apenas essa linha não funcionou. Eu adicionei este código no final da função de inicialização:

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

Por isso, é apenas chamado depois que o mapa é mostrado.