1

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:

http://www.mkyong.com/javascript/javascript-call-funtion-after-page-load/

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.

How do I load the markers after the map has been loaded automatically?

Here is my body of html:

<body>
<TR>
    <TD>
        <div id="map" style="width: 1250px; height: 750px"></div>
    </TD>
    <TD>
        <!--field for start-->
        <p>Start Date Time:</p>
        <form method="post" action="">
    <!--addMarkers button is called and executed correctly when this button is pressed-->
            <input type="button" value="Search" onclick="addMarkers()">
        </form>
    </TD>
</TR>
   <!--this does nothing or is not executed as I hoped-->
<script>
    window.onload=addMarkers() ;
</script>
</body>

My load function for the maps is located at the end of my html document:

<script type="text/javascript">
   //***************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();
</script>

Let me know if there is anything I can clarify.

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()...

Here is what I have now but works the same as before. Markers are not generated until I press the search button:

 //************Part of head***************************************************
  <script src="addcreateclear_Markers.js"></script> 
  <script type="text/javascript">


    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.");

   }

</script>
</head>


 <!--************Function in body***************************************************-->
 <body onload='load()'>
 <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" ALIGN="Center" WIDTH=100%>
<TR>
    <TD>
        <div id="map" style="width: 1250px; height: 750px"></div>


    </TD>
    <TD>
        <!--field for start-->
        <p>Start Date Time:</p>
        <form method="post" action="">
            <input type="button" value="Search" onclick="addMarkers()">
        </form>
    </TD>
</TR>


</TABLE>

<script>
window.onload = addMarkers();
</script>

</body>

MORE EDITS: Calling this function at the end of the html body makes this work as I want:

<script type="text/javascript">
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);
}
</script>
Stagleton
  • 1,060
  • 3
  • 11
  • 35
  • before you `onload()` your map markers, you should have your map loaded first. watch out the sequence. – Raptor May 03 '12 at 14:19
  • side note: always use lowercase for the tags. (`` instead of ``) – Christoph May 03 '12 at 14:21
  • Where is your code that adds the markers? Also, you need to add markers after the map is loaded. – Pete May 03 '12 at 14:21
  • @Pete code to add markers is in the head. How do I add the markers after the map is loaded? When I add the load script to the header, it does not work. – Stagleton May 03 '12 at 14:23
  • @Shivan Raptor how do I change the sequence to do that? FOr some reason the load script does not work int he hearder – Stagleton May 03 '12 at 14:23
  • 2
    @Stagleton Would you mind posting all of your source code? Are you sure you have a reference to the Google Maps API? – Pete May 03 '12 at 14:37

3 Answers3

1

You're calling the load() function before the DOM finishes loading. Move the call to the function to the body in your HTML:

<body onload='load()'>

You should call addMarkers() after you instantiate the map object:

map = new google.maps.Map(document.getElementById("map"),myOptions);
addMarkers();

Here is an example that shows how to load a marker:

https://google-developers.appspot.com/maps/documentation/javascript/examples/marker-simple (view source)

andresf
  • 2,063
  • 1
  • 11
  • 7
  • I can't get it to work this way. My addMarkers() method uses the map area information and the information from some next fields to generate. maybe that is part of the problem. :-/ – Stagleton May 03 '12 at 15:25
  • @andresf I thought setting up a `window.onload = fxn;` was supposed to call the `fxn` function _after_ the DOM was set up and all the images had completed loading. Why are you saying that `load()` is getting called before the DOM is finished loading? – Sean Mickey May 03 '12 at 15:35
  • @SeanMickey Because the user has a function he created called load(). He is not talking about `window.onload`. Really I don't think there is enough information in his question to answer it but he seems unwilling to add any more code... – Pete May 03 '12 at 16:55
  • @andresf Oh ok, I get it. I thought you were talking about the `onload` that is assigned to `addMarkers`, which _is_ set up with the line: `window.onload=addMarkers()`. It's confusing because the `onload` points at `addMarkers` and then there is the separate `load`. Just wanted to make sure I was tracking with you. Thanks - – Sean Mickey May 03 '12 at 17:03
  • Stagleton, why don't you provide a link to your site? Maybe you need to set up an event listener to fire the `addMarkers` function after the map has finished loading... – andresf May 04 '12 at 20:25
1

I asked for more code so I could give you an answer I was more sure of. Like the other answers here mine is a bit of a guess since we do not have the entire source code.

It seems like you moved your load() function to the end of the file. So what might be happening is that window.onload (your addMarkers() function) is actually firing before the map script is executed. If this is incorrect, just comment and/or update your original question with more information please.

See here for a question on when window.onload is fired.

EDIT: See JSFiddle for the working code below:

    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function addMarkers() {
  //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() {
        map.setZoom(10);
    }, 3000);
}
</script>
<body onload='load()'>
    <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" ALIGN="Center" WIDTH=100%>
        <TR>
            <TD>
                <div id="map" style="width: 1250px; height: 750px"></div>
            </TD>
            <TD>
                <!--field for start-->
                <p>Start Date Time:</p>
                <form method="post" action="">
                    <input type="button" value="Search" onclick="addMarkers()">
                </form>
            </TD>
        </TR>
    </TABLE>
<script>
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();
   //***************Function moved out of header***************************************************
var map;
    var markersArray = [];
    var startformat;
    var endformat;
addMarkers();
</script>

</body>
Community
  • 1
  • 1
Pete
  • 10,651
  • 9
  • 52
  • 74
  • hey, yes I think that is what is happening. I have tried to change around my code, but it seems like I can't get the addMarkers() function to execute after the map has rendered. I've tried changing the ordering, but the load() function needs to be after most of the scripts in the head. I can try to add more code if it would help, but I've changed around the html quite and I don't want to change the question too much – Stagleton May 04 '12 at 11:08
  • @Stagleton How's that work? I had to add my own `addMarkers()` function but I think this is what you want. Also, we are trying to answer your question so edit the original posting as much as you need to in order to give us the information we need. The question doesn't help anyone, including you, if we can't answer it. – Pete May 04 '12 at 17:32
  • hey, thanks. Doing my best to add all the info you need. I really appreciate the help. This looks promising. I will edit later today after some sleep and update progress. thanks again. g-night – Stagleton May 04 '12 at 22:58
  • @StagleTon Glad to hear it but please realize that it's not really a great solution to set a timeout like that. I have an updated [Fiddle](http://jsfiddle.net/BigPete/DnkZP/2/) that simple calls `addMarkers()` from the `load()` function. Anyway, glad to help. Good luck to you. – Pete May 05 '12 at 07:49
  • yeah, I've tried it that way before and I can't seem to get it to work. The timeout way seems crude but works and hopefully I can get a better solution later – Stagleton May 05 '12 at 15:11
0

Why not simply call the function directly after the map is created? 

 <script type="text/javascript">
//***************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.");

addMarkers();    <---- ADDED HERE

}
load();
</script>
jenswirf
  • 7,087
  • 11
  • 45
  • 65
  • I've tried that but it doesnt work. Not sure why. Logically it seems like after the map is created, the addMarkers function should work without any problem. – Stagleton May 03 '12 at 15:27