jQuery Mobile 1.0.1 Reload Refreshが動作した後、初めてGoogleマップに地図が表示されない

Question

問題はいつでも私がウェブサイトを開いていることです。初めて地図が表示されないときは、リロード/参照後に地図が表示されます。ここで

は私のGoogleマップコードです：

私はjQueryを使ってそれを使用する方法を

<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> 

そして、ここで：

<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

あなたがフルにどのうだけ火を発射するwindow.loadイベントを待っていますページリフレッシュ。ここでは、問題のコードは次のとおりです。

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

あなたの#restautantページのpageinitイベントにバインドするjQueryのを使用することができます。

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

#restaurant擬似ページが初期化されたときにこれが（initialize()機能をトリガしますこれはDOMに追加されるたびに1回発生します）。ここで

はpageinitイベント（だけでなく、他のすべてのjQueryのモバイルイベント）のドキュメントです：http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html