CODEWITHSUNDEEP
javascripthtmlajaxgoogle-maps-api-3
Stagleton
Stagleton

Reputation: 1060

How do I add markers to a map when a webpage first loads?

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>

Upvotes: 1

Views: 2614

Answers (3)

Pete
Pete

Reputation: 10871

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>

Upvotes: 1

andresf
andresf

Reputation: 2061

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)

Upvotes: 1

jenswirf
jenswirf

Reputation: 7317

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>

Upvotes: 0

Related Questions