ページのロード中に関数を呼び出してマーカーをマップに追加するのは本当に簡単に思えますが、ページのロード中にこれを行うことはできず、マップがロードされて準備が整った後に検索ボタンを押す必要があります. このページを使用してみました：
http://www.mkyong.com/javascript/javascript-call-funtion-after-page-load/
関数「addMarkers」を呼び出すスクリプトを本体の最後に配置しましたが、何も起こりません。検索ボタンを使用して呼び出した場合にのみ、この関数を適切に機能させることができます。
マップが自動的に読み込まれた後、マーカーを読み込むにはどうすればよいですか?
これが私の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>
マップの読み込み関数は、html ドキュメントの最後にあります。
<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>
明確にできることがあれば教えてください。
編集: addMarkers() は、表示されたマップ領域と 2 つのテキスト フィールドのテキストを使用します。人々が言っているように、すべての準備が整う前に関数が実行されているようです。最初にロードするページのすべてを取得してから、何らかの方法で addMarkers() を実行する必要があります...
これが私が今持っているものですが、以前と同じように機能します。検索ボタンを押すまでマーカーは生成されません。
//************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>
詳細編集: html 本文の最後でこの関数を呼び出すと、この関数が必要なように機能します。
<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>