Próbuję wyświetlić mapę na mojej stronie internetowej, aby uzyskać z niej współrzędne. Działa dobrze, mogę przeciągnąć i upuścić znacznik i uzyskać współrzędne w polach wprowadzania.

Ale mój problem pojawia się, gdy ładuję stronę internetową. Wszystko jest dobrze wyświetlane, ale mapa, tutaj możesz zobaczyć, jak wyświetlana jest mapa:

Ale jeśli w tym momencie zmieniam rozmiar strony, to znaczy, jeśli był to pełny ekran, połóż to na pół. Albo spraw, aby był trochę większy, większy lub mniejszy, gdyby był tylko częścią ekranu. Następnie zobaczysz prawidłową mapę:

(To nie jest to samo miejsce, wiem. Zrobiłem zdjęcie z 2 przeładowań)

Tworzę stronę internetową w HTML, ale nazywam ją tak, jakby były odrębnymi stronami internetowymi. Po załadowaniu indeksu otrzymujesz przycisk z tym

href:<a href="#openMap">

I pokazana część będzie:

<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

I wszystkie divy, formy ... właściwie zamknięte. Mam wiele pól i pól, których nie umieściłem tutaj.

W moim skrypcie mapy google mam to:

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

}

Ale nie mam pojęcia, dlaczego muszę zmienić rozmiar. Czy to sposób na rozwiązanie tego problemu?

EDYCJA: Dodam więcej informacji:

Nazywam tę część strony, która ma mapę w ten sposób:

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

Próbowałem to ułożyć

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

zaraz po tym, ale nic się nie dzieje.

ROZWIĄZANIE:

Znalazłem rozwiązanie w innym pytaniu (Google Maps v3 ładuje się częściowo w lewym górnym rogu, zdarzenie zmiany rozmiaru nie działa, Ian Devlin post):

Jak powiedział tutaj jeden użytkownik, muszę zmienić rozmiar mapy. Ale ta linia nie działała. Dodałem ten kod na końcu funkcji inicjalizacji:

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

Jest to po prostu wywoływane po wyświetleniu mapy.