title: Map doesn't load with page but does on refresh
body: <p>I am at a loss here. My google maps will not load when I link to them unless I refresh. I was able to find this same question elsewhere, but the author seemed to find a solution that does not work for me (or I don't know how to implement his solution)</p>
  
  <p>I have two pages, each displaying a google map.</p>
  
  <p>When I open the first page, the map initially appears. However, when I open (by clicking the link) the second page, the map does not show until I refresh the page. When I open from the second page back to the first, I experience the same problem. I then created a third page without a map that links back to the first page. When I open the third page from the first, and then back, the first page map shows up fine. (I think it's opening the cached page?) But, if I open the second from the first, I have to refresh to see the map on the second page, then when I open the third from the second, and then go back to the first from the third, the first page map fails to open until I refresh.</p>
  
  <p>If I go from the first page to the second and the second to the third without refreshing the second page, the first page opens from the third without any problem and the map shows. Again, I believe that it is because the map itself is cached.</p>
  
  <p>I just don't know how to fix this.</p>
  
  <p>I have tried adding a delay as advised in one of the answers below; I have tried moving the initialize portion of the script to just before the <code>&lt;/body&gt;</code> tag; and I tried adding a line of code from the other found solution. I have also tried renaming variables on my second map, but all that does is prevent my map from displaying altogether.</p>
  
  <p>Here is the code from my first page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Mt. Zion Cemetery&lt;/title&gt;
  
  &lt;meta name="viewport" content="minimal-ui, user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  &lt;link href="css/mtzion.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
  &lt;script&gt;
    function initialize() {
      var map_canvas = document.getElementById('map_canvas');
       var myLatlng = new google.maps.LatLng(39.0474807,-87.4794325);
      var map_options = {
        center: myLatlng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
         disableDefaultUI: true,
         zoomControl: true,
         mapTypeControl: true,
         mapTypeControlOptions: {
             style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
             position: google.maps.ControlPosition.RIGHT_BOTTOM
         }
      }
      var map = new google.maps.Map(map_canvas, map_options)
       var marker = new google.maps.Marker({
           position:myLatlng,
           map: map,
           animation: google.maps.Animation.DROP,
           title:"Mt. Zion Cemetery",
       });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="map_canvas"&gt;&lt;/div&gt;
  
  &lt;header&gt;
      Mt. Zion Cemetery
  &lt;/header&gt;
  
  &lt;article&gt;
  
      &lt;a href="location.html"&gt;2nd map page&lt;/a&gt;
  
  &lt;/article&gt;
  
  &lt;footer&gt;
      &lt;a href="maptest.html"&gt;blank page with return to home&lt;/a&gt;&lt;
  &lt;/footer&gt;&lt;!-- /footer --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the code for my second page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Mt. Zion Cemetery&lt;/title&gt;
  
  &lt;meta name="viewport" content="minimal-ui, user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  &lt;link href="css/mtzion.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script&gt;
    function initialize() {
      var map_canvas = document.getElementById('map_canvas');
       var myLatlng = new google.maps.LatLng(39.048079, -87.479784);
      var map_options = {
        center: myLatlng,
        zoom: 22,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
         disableDefaultUI: true,
         zoomControl: true,
         mapTypeControl: true,
         mapTypeControlOptions: {
             style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
             position: google.maps.ControlPosition.RIGHT_BOTTOM
         }
      }
      var map = new google.maps.Map(map_canvas, map_options)
       var marker = new google.maps.Marker({
           position:myLatlng,
           map: map,
           title:"grave locator",
       });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="map_canvas"&gt;&lt;/div&gt;
  
  &lt;header&gt;
      Grave Locator
  &lt;/header&gt;
  
  &lt;article&gt;
  
      &lt;a href="index.html"&gt;Page Footer&lt;/a&gt;
  
  &lt;/article&gt;
  
  &lt;footer&gt;
      &lt;a href="maptest.html"&gt;blank page with return to home&lt;/a&gt;&lt;
  &lt;/footer&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can anyone see the errors in my code/script?</p>