title: Google Map is not loading for the first time
body: <p>I am using Google Maps JavaScript API to load map inside my mobile website. When I navigate from the previous page map won't load but if I refresh the page map load as expected. If I use the JavaScript inside the body even the page is not loading. I can't figure out the problem. Is it something with the previous page code ?</p>
  
  <p>Here is my code in Head tag.</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
  &lt;link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.min.css" /&gt;  
  &lt;link href="css/site.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="./js/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" 
  src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxx&amp;sensor=false"&gt;
  &lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              function initialize() {
                  var myLatlng = new google.maps.LatLng(&lt;?php echo $longtitude ?&gt;, &lt;?php echo $latitude ?&gt;);
  
                  var mapOptions = {
                    zoom: 10,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                  };
  
                  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  
                  var marker = new google.maps.Marker({
                      position: myLatlng,
                      map: map,
                      title: 'Location'
                  });
              }
               google.maps.event.addDomListener(window, 'load', initialize);
  
               $(document).delegate('#content', 'pageinit', function () {
                 navigator.geolocation.getCurrentPosition(initialize);
                  });
          &lt;/script&gt;
  &lt;/head&gt; 
  </code></pre>
  
  <p>Here is my Body Tag</p>
  
  <pre><code>&lt;body &gt;
      &lt;div id="wrapper"&gt;
          &lt;div class="header"&gt;
              &lt;a href="index.html"&gt;&lt;img src="images/logo-small.png" alt="logo"/&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="back"&gt;
          &lt;a data-rel="back"&gt;&lt;img src="images/back.png"/&gt;&lt;/a&gt;
      &lt;/div&gt; 
          &lt;div id="content"&gt;
              &lt;div class="list"&gt;
                  &lt;div class="list-items" id="info"&gt;
                      &lt;?php echo "&lt;h3&gt;$sa1&lt;span&gt;$postcode&lt;span&gt;$sa2&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;h2&gt;$price&lt;/h2&gt;";?&gt;
                  &lt;br class="clear" /&gt;
                  &lt;br class="clear" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br class="clear" /&gt;
          &lt;div id="map-canvas"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I refer question <a href="https://stackoverflow.com/questions/13945586/google-maps-not-loading-correclty-when-first-viewing-website">This</a> and <a href="https://stackoverflow.com/questions/15752264/google-maps-does-not-initialize-first-time">This</a> but it's not working with my code.</p>