ウェブページが最初に読み込まれたときにマーカーにマーカーを追加するにはどうすればよいですか？

ページロード中に関数を呼び出してマーカーをマーカーに追加するのは本当に簡単なようですが、ページがロードされている間はこれを行うことができず、マップがロードされた後に検索ボタンを押す必要があります準備が整いました。私は、このページを使用してみました：ウェブページが最初に読み込まれたときにマーカーにマーカーを追加するにはどうすればよいですか？

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>

は、私ができるものがあるかどうか、私に教えてください明らかにする。

EDIT： 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>

MORE EDITS：：私が好きな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>

出典

2012-05-03 Stagleton

はあなた 'のonload（）'マップマーカーの前に、あなたはあなたのマップが最初にロードされている必要があります。シーケンスを見てください。 – Raptor

サイドノート：タグには常に小文字を使用してください。（ ''の代わりに ''） – Christoph

マーカーを追加するコードはどこですか？また、地図を読み込んだ後にマーカーを追加する必要があります。 – Pete

私はMOを求め：マーカーを読み込みます私はあなたに私がもっと確信していた答えを与えることができました。他の答えと同じように私はソースコード全体を持っていないので、少し推測します。

load()機能をファイルの最後に移動したようです。だから何が起こっているかもしれないのは、window.onload（あなたのaddMarkers()関数）がマップスクリプトが実行される前に実際に起動しているということです。これが間違っている場合は、オリジナルの質問にコメントしてください。

window.onloadが解雇されるときの質問については、hereを参照してください。

EDIT：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>

出典

2012-05-03 17:14:07 Pete

ねえ、そうだよ。私は自分のコードの周りを変更しようとしましたが、マップがレンダリングされた後にaddMarkers（）関数を実行することができないようです。私は順序を変更しようとしましたが、load（）関数は頭の中のほとんどのスクリプトの後にある必要があります。それが助けになるなら、もっとコードを追加しようとすることができますが、htmlの周りをかなり変更しました。私はあまり質問を変更したくありません。 – Stagleton

@Stagletonどうしたのですか？私は自分の 'addMarkers（）'関数を追加しなければなりませんでしたが、これはあなたが望むものだと私は思います。また、お客様の質問にお答えしようとしており、必要な情報を提供するために必要なだけ元の投稿を編集しています。私たちが答えることができなければ、質問はあなたを含む誰も助けません。 – Pete

ねえ、ありがとう。あなたが必要とするすべての情報を追加するために最善を尽くします。私は本当に助けに感謝します。これは有望に見えます。私はいくつかの睡眠と更新の進歩の後に今日後で編集します。再度、感謝します。 g-night – Stagleton

なぜ単純に呼び出さないが、私は、検索ボタンを押すまでマーカーが生成されていません地図の直後の関数は作成されますか？

<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>

出典

2012-05-03 14:46:25 jenswirf

私はそれを試みましたが、それは動作しません。理由は分かりません。論理的には、マップの作成後、addMarkers関数は問題なく動作するはずです。 – Stagleton

コンソールにエラーメッセージが表示されますか？ – jenswirf

DOMの読み込みが完了する前に、load()関数を呼び出しているとします。あなたのHTMLに体に関数の呼び出しを移動：

<body onload='load()'>

あなたがマップオブジェクトインスタンス化した後、あなたは）（addMarkersを呼び出す必要があります：

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

ここではどのように示した例です。

https://google-developers.appspot.com/maps/documentation/javascript/examples/marker-simple （ソースを表示）

出典

2012-05-03 14:46:51 andresf

私はそれをこのように動作させることはできません。私のaddMarkers（）メソッドはマップエリア情報といくつかの次のフィールドの情報を使って生成します。多分それは問題の一部です。： -/ – Stagleton

@andresf 'window.onload = fxn;を設定すると、' fxn'関数が呼び出され、DOMが設定され、すべての画像の読み込みが完了したと考えました。なぜロードが終了する前に 'load（）'が呼ばれているのですか？ –

@SeanMickeyユーザーはload（）という名前の関数を作成しています。彼は 'window.onload'について話していません。本当に私は答えに十分な情報があるとは思っていませんが、コードを追加したくないようです... – Pete

ウェブページが最初に読み込まれたときにマーカーにマーカーを追加するにはどうすればよいですか？

答えて

関連する問題