title: Google map not showing on Jquery Mobile page
body: <p>I have been using the below Google Maps script without problems. However, after adding Jquery Mobile to the page the map won't show when I access the page through a link. If I reload the page the map shows. Searching for a solution I have found that it probably is a problem with the script not initializing but I have not been able to implement any suggested solution. Is there an easy way to have my existing script being initialized or do I have to somehow re-write the whole thing if I want to use Jquery Mobile?</p>
  
  <p>Many thanks </p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt; 
      &lt;title&gt;MyTitle&lt;/title&gt; 
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="keywords" content="" /&gt;
      &lt;meta name="author" content="" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="../../style.css" media="screen" /&gt;
      &lt;link rel="stylesheet" href="../../Green.min.css" /&gt;
      &lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Google Map --&gt;
    &lt;script&gt;
  var map = null;
  var markerArray = []; //create a global array to store markers
  var locations = [
      ['1', 29.979175, 31.134358, 6, '1.png'],
      ['2', 32.483333, 44.433333, 7, '2.png'],
      ['3', 37.95, 27.366667, 4, '3.png'],
      ['4', 37.638, 21.63, 5, '4.png'],
      ['5', 37.033333, 27.433333, 3, '5.png'],
      ['6', 36.433333, 28.216667, 2, '6.png'],
      ['7', 31.213931, 29.885661, 1, '7.png']];
  function initialize() {
      var myOptions = {
          zoom: 5,
          center: new google.maps.LatLng(34, 32),
          mapTypeControl: true,
          mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
          },
          navigationControl: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      google.maps.event.addListener(map, 'click', function() {
          infowindow.close();
      });
      // Add markers to the map
      // Set up markers based on the number of elements within the myPoints array
      for (var i = 0; i &lt; locations.length; i++) {
          createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
      }
      mc.addMarkers(markerArray, true);
  }
  var infowindow = new google.maps.InfoWindow({
      size: new google.maps.Size(150, 50)
  });
  function createMarker(latlng, myTitle, myNum, myIcon) {
      var contentString = myTitle;
      var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          icon: myIcon,
          zIndex: Math.round(latlng.lat() * -100000) &lt;&lt; 5,
          title: myTitle
      });
      google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(contentString);
          infowindow.open(map, marker);
      });
      markerArray.push(marker); //push local var marker into global array
  }
  window.onload = initialize;
  
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt; 
  
  &lt;div data-role="page" &gt;
  
  
  &lt;div data-role="header"&gt;
  &lt;a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse"&gt;Home&lt;/a&gt;
  &lt;/div&gt;&lt;!-- /header --&gt;
  
  &lt;div id="wrapper data-role="content" "&gt;
  &lt;?php include('../../includes/header.php'); ?&gt;
  
  &lt;div id="content"&gt;
  
  &lt;div id="map_canvas" style="width: 600px;height: 500px;"&gt;&lt;/div&gt;
  
  &lt;/div&gt; &lt;!-- end #content --&gt;
  
  &lt;div id="footer"&gt;
  &lt;/div&gt; &lt;!-- end #footer --&gt;
  
  &lt;/div&gt; &lt;!-- End #wrapper --&gt;    
  
  &lt;/div&gt;&lt;!-- /page --&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>