title: How do I add markers to a map when a webpage first loads?
body: <p>It seems like it would be really easy to call a function and add markers to a map during the page load, however I am not able to do this while the page is loading and have to press a search button after the map is loaded and ready. I tried using this page:</p>
  
  <p><a href="http://www.mkyong.com/javascript/javascript-call-funtion-after-page-load/" rel="nofollow">http://www.mkyong.com/javascript/javascript-call-funtion-after-page-load/</a></p>
  
  <p>I put a script at the end of my body to call the function 'addMarkers' but nothing happens. I can only get this function to work properly when I call it using a search button.</p>
  
  <p>How do I load the markers after the map has been loaded automatically?</p>
  
  <p>Here is my body of html:</p>
  
  <pre><code>&lt;body&gt;
  &lt;TR&gt;
      &lt;TD&gt;
          &lt;div id="map" style="width: 1250px; height: 750px"&gt;&lt;/div&gt;
      &lt;/TD&gt;
      &lt;TD&gt;
          &lt;!--field for start--&gt;
          &lt;p&gt;Start Date Time:&lt;/p&gt;
          &lt;form method="post" action=""&gt;
      &lt;!--addMarkers button is called and executed correctly when this button is pressed--&gt;
              &lt;input type="button" value="Search" onclick="addMarkers()"&gt;
          &lt;/form&gt;
      &lt;/TD&gt;
  &lt;/TR&gt;
     &lt;!--this does nothing or is not executed as I hoped--&gt;
  &lt;script&gt;
      window.onload=addMarkers() ;
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My load function for the maps is located at the end of my html document:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     //***************Function moved out of header***************************************************
  var map;
      var markersArray = [];
      var startformat;
      var endformat;
  
  function load() {
  
      var myOptions = {
        center: new google.maps.LatLng(42, -70),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map"),myOptions);
  alert("Click search to look for markers.");
  
  }
  load();
  &lt;/script&gt;
  </code></pre>
  
  <p>Let me know if there is anything I can clarify. </p>
  
  <p>EDIT:
  addMarkers() uses the displayed map region and some text from two text fields. Like people have been saying, it seems like the function is getting executed before everything is ready. I need to get everyting on the page to load first and then somehow execute addMarkers()...</p>
  
  <p>Here is what I have now but works the same as before. Markers are not generated until I press the search button:</p>
  
  <pre><code> //************Part of head***************************************************
    &lt;script src="addcreateclear_Markers.js"&gt;&lt;/script&gt; 
    &lt;script type="text/javascript"&gt;
  
  
      var map;
      var markersArray = [];
      var startformat;
      var endformat;
  
      function load() {
  
      var myOptions = {
        center: new google.maps.LatLng(42, -70),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map"),myOptions);
      addMarkers();
      //alert("Click search to look for markers.");
  
     }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  
   &lt;!--************Function in body***************************************************--&gt;
   &lt;body onload='load()'&gt;
   &lt;TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" ALIGN="Center" WIDTH=100%&gt;
  &lt;TR&gt;
      &lt;TD&gt;
          &lt;div id="map" style="width: 1250px; height: 750px"&gt;&lt;/div&gt;
  
  
      &lt;/TD&gt;
      &lt;TD&gt;
          &lt;!--field for start--&gt;
          &lt;p&gt;Start Date Time:&lt;/p&gt;
          &lt;form method="post" action=""&gt;
              &lt;input type="button" value="Search" onclick="addMarkers()"&gt;
          &lt;/form&gt;
      &lt;/TD&gt;
  &lt;/TR&gt;
  
  
  &lt;/TABLE&gt;
  
  &lt;script&gt;
  window.onload = addMarkers();
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>MORE EDITS:
  Calling this function at the end of the html body makes this work as I want:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function addMarkersLag() {
    //Print the map object out to the console
      console.log(map);
      //Zoom in on the map after 2 seconds so you can see this function being called
      window.setTimeout(function() {
      addMarkers();
          alert("Does it work?.");
      }, 1000);
  }
  &lt;/script&gt;
  </code></pre>