Estoy tratando de mostrar un mapa en mi página web para obtener coordenadas de él. Funciona bien, puedo arrastrar y soltar un marcador y obtener coordenadas en los cuadros de entrada.

Pero mi problema viene cuando carga la página web. Todo se muestra bien, pero el mapa, aquí puede ver cómo se muestra el mapa:

Pero si en este momento redimensiono la página web, quiero decir, si fue pantalla completa, póngala a medias. O hazlo un poco más grande, más grande o más pequeño, si fuera solo una parte de la pantalla. Luego, verás el mapa correcto:

(No es el mismo lugar, lo sé. Tomé la imagen de 2 recargas)

Creo la página web en HTML, pero la llamo como si fueran páginas web distintas. Cuando carga el índice, obtiene un botón con este

href:<a href="#openMap">

Y, la 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

Y todos los divs, formas ... debidamente cerradas. Tengo muchos cuadros de entrada y campos que no los he puesto aquí.

Entonces, en mi google map script tengo esto:

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

}

Pero no tengo idea de por qué necesito cambiar el tamaño. ¿Es una forma de resolverlo?

EDITAR: Añado más información:

Llamo a la parte de la página web que tiene el mapa de esta manera:

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

Traté de poner

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

Justo después de eso, pero no pasa nada.

SOLUCIÓN:

Encontré la solución en otra pregunta (La carga de Google Maps v3 parcialmente en la esquina superior izquierda, el evento de cambio de tamaño no funciona, Ian Devlin post):

Como dijo un usuario aquí, necesito cambiar el tamaño del mapa. Pero solo esa línea no funcionó. Agregué este código al final de la función de inicialización:

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

Así que se llama después de que se muestra el mapa.