Die eingebettete Google Map wird bis zur Größenänderung der Webseite falsch angezeigt

Ich versuche, eine Karte auf meiner Webseite anzuzeigen, um Koordinaten daraus zu erhalten. Es funktioniert einwandfrei, ich kann eine Markierung ziehen und ablegen und Koordinaten in Eingabefeldern abrufen.

Aber mein Problem kommt, wenn ich die Webseite lade. Alles wird gut angezeigt, außer der Karte. Hier können Sie sehen, wie die Karte angezeigt wird:

Aber wenn ich in diesem Moment die Größe der Webseite verändere, meine ich, wenn es Vollbild war, halbe Größe. Oder machen Sie es ein bisschen größer oder kleiner, wenn es nur ein Teil des Bildschirms war. Dann sehen Sie die richtige Karte:

(Es ist nicht derselbe Ort, ich weiß. Ich habe das Bild von 2 Reloads genommen.)

Ich erstelle die Webseite in HTML, nenne sie aber so, als ob es sich um unterschiedliche Webseiten handeln würde. Wenn Sie den Index laden, erhalten Sie eine Schaltfläche mit diesem

href:<a href="#openMap">

Und der gezeigte Teil wird sein:

<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

Und alle Teile, Formen ... richtig geschlossen. Ich habe viele Eingabefelder und Felder, die ich hier nicht angegeben habe.

Dann habe ich in meinem Google Map-Skript Folgendes:

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

}

Aber ich habe keine Ahnung, warum ich die Größe ändern muss. Ist es ein Weg, es zu lösen?

BEARBEITEN: Ich füge weitere Informationen hinzu:

Ich rufe den Teil der Webseite, der die Karte hat, folgendermaßen auf:

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

Ich habe versucht zu setzen

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

kurz danach passiert aber nichts.

LÖSUNG:

Ich habe die Lösung in einer anderen Frage gefunden (Google Maps v3 wird teilweise in der oberen linken Ecke geladen. Die Größenänderung des Ereignisses funktioniert nicht, Ian Devlin Post):

Wie ein Benutzer hier sagte, muss ich die Größe der Karte ändern. Aber gerade diese Leitung hat nicht funktioniert. Ich habe diesen Code am Ende der Initialisierungsfunktion hinzugefügt:

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

Es wird also erst aufgerufen, nachdem die Karte angezeigt wurde.