jQuery Mobile 1.0.1 Google Maps zeigt die Karte nicht zum ersten Mal nach Reload Refresh funktioniert

Question

Mein Problem ist jedes Mal, wenn ich die Website öffne; Zum ersten Mal wird die Karte nicht angezeigt, nach einem reload/reflish funktioniert es und zeigt die Karte an.

Hier ist mein Google Maps Code:

<script type="text/javascript"> 
    var map; 
    var infowindow; 

    function initialize(position) { 
    //var pyrmont = new google.maps.LatLng(48.195201,16.369547); 
    var pyrmont = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
    map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: pyrmont, 
     zoom: 15 
    }); 
    var a = new google.maps.Marker({position: pyrmont,map: map,icon:'catal.png'}); 
    var request = { 
     location: pyrmont, 
     radius: 500, 
     types: ['restaurant'] 
    }; 
    infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 
    service.search(request, callback); 
    } 

    function callback(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 
     createMarker(results[i]); 
     } 
    } 
    if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS){ 
    alert('zero results near this location'); 
    } 
    } 

    function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent( place.name 
           +'<br/>'+place.vicinity); 
     infowindow.open(map, this); 
    }); 
    } 

    google.maps.event.addDomListener(window, 'load', function(){ 
     navigator.geolocation.getCurrentPosition(initialize); 
    }); 
</script> 

Und hier, wie ich es mit jquery verwenden:

<div data-role="page" id="restaurant"> 
    <div data-role="header"> 
     <a href="index.html" data-icon="arrow-l">Back</a> 
     <h1>Restaurants</h1>  
    </div> 

    <div data-role="content"> 
     <div id="map" style="width:400px; height:400px;"></div> 
    </div> 
</div> 

Answer 1

Sie sind für die window.load Ereignis warten, um zu feuern die erst das Feuer auf Voll Seitenaktualisierungen Hier ist der säumige Code:

google.maps.event.addDomListener(window, 'load', function(){ 
    navigator.geolocation.getCurrentPosition(initialize); 
}); 

Sie können jQuery verwenden, um das pageinit Ereignis zu binden, für Ihre #restautant Seite:

$(document).delegate('#restaurant', 'pageinit', function() { 
    navigator.geolocation.getCurrentPosition(initialize); 
}); 

Dies löst die initialize() Funktion, wenn die #restaurant pseudo-Seite initialisiert (was jedes Mal passiert, wenn es dem DOM hinzugefügt wird. Hier

ist die Dokumentation für das pageinit Ereignis (wie auch alle anderen jQuery Mobile Ereignisse): http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html