Google Map API v3 aus der Mitte, wenn neu geladen (nicht die übliche 'Größe')

Question

Ich lese alle ähnlichen Fragen, aber meins ist etwas anders. Wenn das erste Mal ein JQuery Mobile-Dialog angezeigt wird, wird die Map innerhalb des üblichen maps_canvas-Div geladen, aber wenn der Dialog neu geladen wird (dh zurückgehen und auf den Button klicken, um den Dialog erneut zu öffnen), wird er nur teilweise ausgezoomt angezeigt zu einer 3 oder 4 und zentriert um die obere linke Ecke des Divs.

Es gibt keine Änderung in der div-Größe (die explizit festgelegt ist) und für gutes Maß wird eine google.maps.event.trigger(map, 'resize'); aufgerufen.

Ich habe auch versucht, die Karte zu initialisieren nach der Dialog angezeigt wird, aber das Ergebnis ist das gleiche.

Button-Code:

$("#dest-map-button").click(function() { 
      initializeMap(job_id,"map_canvas"); 
     } 
); 

Funktion:

function initializeMap(job_id, map_div){ 

    var pos = arrJobs[job_id].lat_lng.split(','); 
    var job_pos = new google.maps.LatLng(pos[0],pos[1]); 

    var driverLatLng = lat_lng.split(','); 
    var driver_pos = new google.maps.LatLng(driverLatLng[0],driverLatLng[1]); 

    var myOptions = { 
     zoom: 18, 
     center: driver_pos, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     disableDefaultUI: true 
    } 

    map = new google.maps.Map(document.getElementById(map_div), myOptions); 

    var marker = new google.maps.Marker({ 
     position: job_pos, 
     map: map, 
     title: "Job" 
    }); 

    var marker2 = new google.maps.Marker({ 
     position: driver_pos, 
     map: map, 
     title: "X", 
    }); 

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

HTML:

<div data-role="page" id="dialog-destination-map" data-theme="e"> 
    <div data-role="content"> 
     <div id="map_canvas" style="height:300px; width:300px; position: relative; margin: 0px auto;"> 
     map_canvas 
     </div> 
    </div> 
    </div> 

Irgendwelche Ideen?

EDIT: Diese Frage beschreibt, scheint genau das gleiche Problem: JQuery Mobile & Google Maps Glitch Aber die Lösung zur Verfügung gestellt (Caching) kann hier nicht verwendet werden, da die Karte muss möglicherweise

ändern

Answer 1

Nachdem ich alles andere versucht habe, bin ich endlich auf das Ereignis pageshow gestoßen. Der Aufruf initializeMap nachdem alle Seitenübergänge fertig sind und nicht, wenn Sie auf die Schaltfläche hat das Problem gelöst:

$('#dialog-destination-map').live('pageshow',function(event){ 
    initializeMap(job_id,"map_canvas"); 
    } 
); 

ich noch fragen, wie kommt es dann an der ersten Last arbeitet ...

Answer 2

var driverLatLng wird mit lat_lng.split(','); initialisiert, der hasn‘ t vorher erklärt worden.

Answer 3

Sie dies nicht tun Sie müssen bei jedem Besuch der Seite eine neue Karte erstellen. Erstellen Sie die Karte vorher, z. auf pageinit. Auf pageshow: google.maps.event.trigger(mapObj, "resize");

Answer 4

ich mit @ Peter Zustimmen .. Sie brauchen nicht Karte für jedes Ereignis erstellen pageshow .. Stattdessen versuchen Sie dies:

$(document).on("pagebeforechange", function() 
{ 
    if(mapObj){ 
     center = mapObj.getCenter(); 
    } 
}); 
$("#mapPage").bind("pageshow", function() 
{ 
    google.maps.event.trigger(mapObj, "resize"); 
    if(center)mapObj.setCenter(center); 
});