title: Google Maps API V3 requires page reload to show marker icons
body: <p>I am reading points from a DB as JSON to create map markers and an unstructured list on a page.  After adding some code to customize the list elements the map stopped showing the marker icons on first request - until a page reload is issued.  Is this due to timing out from the API?  Could the list object be built from the array after the map is loaded or is there some other way to speed up the code that might eliminate the problem?  The map loaded markers  fine with double this number of markers (300+) so I know problem is as a result of adding the formatting to the list object. No clustering required. A demo version of the page is available here </p>
  
  <p>Signed a JS n00b. Thanks.
  ......
          
      JSON POWERED GOOGLEMAP</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" charset="utf-8"&gt; 
  var map;
      var infoWindow = new google.maps.InfoWindow();
      function initialize() {
          var myLatlng = new google.maps.LatLng(49.57154029531499,-125.74951171875);
  
          var myOptions = {
              zoom: 8,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.TERRAIN,
              streetViewControl: false
              }
  
          this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
          } /* end initialize function */
  
  
  &lt;!--  load points from database into Locations JSON --&gt;
  
  $(document).ready(function () {
      initialize();
      $.getJSON("map-service.php?action=listpoints", function(json) {
  
      if (json.Locations.length &gt; 0) {
          for (i=0; i&lt;json.Locations.length; i++) {
              var location = json.Locations[i];
                  addMarker(location); 
                  }
              }
          });
  
      //define grn icon as closed
      var greenicon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
  
      function addMarker(location) {
              if(location.datesummit == "0000-00-00") {
                  var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng),icon: greenicon};
                  //create marker info window content
                  var html='&lt;B&gt;'+location.name+'&lt;/B&gt;&lt;BR&gt; Register a summit &lt;A href="http://goo.gl/Nl0UQ"&gt;here&lt;/A&gt;  ';
                  //create list element text and onclick          
                  $("&lt;li class=\"notclimbed\"&gt;")
                  .html(location.name+"&lt;/li&gt;") 
                  .click(function(){ 
                      infoWindow.close();
                      infoWindow.setContent(html);
                      infoWindow.open(map, marker)
                  }) 
                  .appendTo("#list"); 
              }
              else{
                  var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng)};
                  //create marker info window content
                  var html='&lt;B&gt;'+location.name+'&lt;/B&gt;&lt;BR&gt; Summitted: '+location.datesummit+'&lt;BR&gt; By:'+location.summitlog;
                  //create list element text and onclick  
                  $("&lt;li class=\"climbed\"&gt;")
                  .html(location.name+"&lt;/li&gt;") 
                  .click(function(){ 
                      infoWindow.close();
                      infoWindow.setContent(html);
                      infoWindow.open(map, marker)
                  }) 
                  .appendTo("#list"); 
              }
              var marker = new google.maps.Marker(markerOptions);
  
              // add a listener to open an info window when a user clicks on one of the markers
              google.maps.event.addListener(marker, 'click', function() {
                  infoWindow.close();
                  infoWindow.setContent(html);
                  infoWindow.open(map, marker);
                  });
  
          }; // end of addmarker function
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;div id="banner" {vertical-align:text-top;} &gt;
      &lt;img src="test.jpg" alt="Logo" style="width:150px;height:150px;vertical-align:middle"&gt;
      &lt;img src="test.png" alt="Logo" style="vertical-align:middle"&gt;
  &lt;/div&gt;
  
  &lt;div id="map_canvas" &gt;
          Map Here!
  &lt;/div&gt;
  
  &lt;div id="mindthegap"&gt;&lt;/div&gt;
  
  &lt;div id="list" &gt;    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>