Question

My problem is everytime i open the website; first time the map doesn’t show up, after a reload/refersh it works and shows the map.

Here is my 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>

And here how i use it with jquery:

<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

You are waiting for the window.load event to fire which will only fire on full-page-refreshes. Here is the offending code:

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

You can use jQuery to bind to the pageinit event for your #restautant page:

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

This will trigger the initialize() function when the #restaurant pseudo-page is initialized (which will happen once each time it’s added to the DOM).

Here is the documentation for the pageinit event (as well as all the other jQuery Mobile events): http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html