title: Google Maps API v3 Loading Only After Page Refresh
body: <p>I'm fiddling around with the Google Maps API for a webpage I'm working on. My issue right now is, the map loads exactly as I intend it to but only after refreshing the page. If I do not refresh the page, all I see is the canvas. The problem remains if I leave the page and return to it so it appears to be an issue with calling for the map to <code>initialize</code>.</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;style&gt;
      #map_canvas {
      width: 670px;
      height: 400px;
      background-color: #CCC;
      }
  &lt;/style&gt;
  &lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script&gt;
      function initialize() {
  
          var myLatLng = new google.maps.LatLng(31.247681, 121.449504);
  
          var map_canvas = document.getElementById('map_canvas');
  
          var map_options = {
          center: new google.maps.LatLng(31.248195, 121.447431),
          zoom: 16,
                  mapTypeControl: false,
                  panControl: false,
          zoomControlOptions: {
                      position: google.maps.ControlPosition.LEFT_CENTER
          },
          streetViewControl: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
  
      var map = new google.maps.Map(map_canvas, map_options);
  
          var contentString =
              '&lt;b&gt;Leung Gallery&lt;/b&gt;' +
              '&lt;p&gt;50 Moganshan Rd. Building 7, Unit 108, Shanghai&lt;/p&gt;' +
              '&lt;p&gt;&amp;#19978;&amp;#28023;&amp;#26222;&amp;#38464;&amp;#21306;&amp;#33707;&amp;#24178;&amp;#23665;&amp;#36335;50&amp;#21495;7&amp;#21495;&amp;#27004;108&amp;#23460;&lt;/p&gt;';
  
          var infowindow = new google.maps.InfoWindow({
              content: contentString
          });
  
          var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
          });
  
          google.maps.event.trigger(map, 'resize');
  
          google.maps.event.addListener(marker, 'click', function(){
              infowindow.open(map,marker);
          });
  
      }
  
      google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;​
  </code></pre>
  
  <p>Browsing through previous questions, I haven't found anything that matched my problem exactly but I've seen some similar situations that revolved around <code>google.maps.event.addDomListener(window, 'load', initialize);</code> so I'm thinking that might be where the issue is. Any help is appreciated.</p>
  
  <p>Edit: Got pointed in the right direction. Adding <code>$(document).bind("projectLoadComplete", initialize);</code> after <code>google.maps.event.addDomListener(window, 'load', initialize);</code> fixes the issue. The issue was that the pages were not fully loading when using the navigation. This issue is probably exclusive to the Cargo Collective platform.</p>