マーカーを上から順に落とし（ドロップ）表示する｜Google Maps API v3

GoogleMapsAPIでマーカーを地図上に表示する際に、
上から落としてマーカーを配置するアニメーションを設定できます。
ここでは複数の「マーカーを落として表示」する例についてご紹介します。
一つ一つが順番に落ちてくるよく見るアニメーション効果です。

概要

1 地図の表示
2 補足
3 サンプルコード
4 参考

地図の表示

以下では「マーカーを全て落とす」ボタンを押すと、
マーカーが一気に落ちてきて表示されます。

「マーカーを順番に落として見せる」をクリックすると、
マーカーが順番に落ちてくる動作をします。

「マーカーを削除する」を押すとすべてのマーカーが削除されます。
なお「マーカーを全て落とす」「マーカーを順番に落として見せる」の
どちらを押した場合も一旦すべてのマーカーを削除しています。

補足

マーカーを順番に落とすアニメーションを行う場合には、
マーカーの生成を「window.setTimeout()」関数によって、
生成するまでの時間を徐々に遅くするように指定していきます。

window.setTimeout()関数で呼び出す関数名を指定する際に、
パラメータを渡す場合には以下処理ではIE非対応となります。
実際には無名関数を渡すななどの記述の方がスマートになるはずです。
※詳しくは後述の「参考」の部分をご覧ください。

マーカー生成時のオプション指定に対して、
「animation: google.maps.Animation.DROP」を設定するのは、
通常のドロップ効果と同じです。

//マーカーのタイムアウト生成
function create_marker_wto(options, timeout){
	//ここで生成したマーカーを順次格納する
	window.setTimeout(create_marker , timeout, options);
}
//マーカーを順番に落として見せる
function dropMaker_wt(){
	//既にあるマーカーを一旦削除
	deleteMakers();
	//新たに生成し、マーカーを順次格納する
	var i=0;
	var to = 0;
	for	 (i=0; i < lcnt; i++){
		to = parseInt(100 * i);
		marker = create_marker_wto({
			map: gmap_canvas,
			position: points[i].latlng,
			title:points[i].location,
			animation: google.maps.Animation.DROP
		}, to);
	}
}

//マーカーのタイムアウト生成

function create_marker_wto(options, timeout){

//ここで生成したマーカーを順次格納する

window.setTimeout(create_marker , timeout, options);

}

//マーカーを順番に落として見せる

function dropMaker_wt(){

//既にあるマーカーを一旦削除

deleteMakers();

//新たに生成し、マーカーを順次格納する

var i=0;

var to = 0;

for (i=0; i < lcnt; i++){

to = parseInt(100 * i);

marker = create_marker_wto({

map: gmap_canvas,

position: points[i].latlng,

title:points[i].location,

animation: google.maps.Animation.DROP

}, to);

}

※コードの全体は以下に記載しています。

サンプルコード

HTML

HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。
エリアを囲んでいる「<div class=”aspect”></div>」部分は、
ページ表示用の高さ制御用のタグです。

エラーが発生しました。後でもう一度やり直してください。

CSS

CSSではclass=”aspect”に対して、幅100%を指定し、高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。

エラーが発生しました。後でもう一度やり直してください。

JavaScript

上記の補足説明の通りです。
ここでは便宜上、JavaScriptのファイル上からボタンを出力しています。

エラーが発生しました。後でもう一度やり直してください。

別途、GoogleMapsAPIのライブラリを読み込む記述が必要です。ご自分が取得されたAPIキーを以下のコードの(YourAPIkey)部分に置き換えて設定してください。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script>

1 2	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script>

参考

Marker animations with setTimeout()｜Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers

上記のサンプルコードでは「window.setTimeout」呼び出しに、
無名関数を直接定義している為、処理できているようですが、

別途定義の関数名を渡した場合でかつ、パラメータがある場合、
タイムアウト指定が効きませんでした。（以下参考）

逆にだから無名ファンクションで指定しているという事ですね。

検索してみた所、以下のような記述も。
おっしゃる通り、ディレイは発生しませんでした（即実行）。

引数いるなら
　setTimeout(test,1000,v);
引数いらないなら
setTimeout(“test()”,1000);
または
setTimeout(test,1000);
という感じです

~~setTimeout(test(v),1000);~~

~~setTimeout(test(),1000,v);~~

ネットではこの方法を書いてるところがありましたが、間違ってます
test()関数は呼ばれますが指定した時間のあとではなく即呼ばれます
普通の関数の書き方から考えて第一引数に渡されるものがtest()を実行した返り値ですし
あと、下の方はv使われません

（引用）　javascript setTimeout関数について – ねとめもー

MDNのサイトでも以下のように書かれています。
パラメータは第三引数以降にする構文が正です。

構文

<var>timeoutID</var> = window.setTimeout(<strong><var>func</var>, <var>delay</var>[, <var>param1</var>, <var>param2</var>, ...]</strong>); <var>timeoutID</var> = window.setTimeout(<var>code</var>, <var>delay</var>);

1
2

<var>timeoutID</var> = window.setTimeout(<strong><var>func</var>, <var>delay</var>[, <var>param1</var>, <var>param2</var>, ...]</strong>);
<var>timeoutID</var> = window.setTimeout(<var>code</var>, <var>delay</var>);

timeoutID : window.clearTimeout で使われる、数値の ID 。

func : delay ミリ秒後に実行したい関数。

code : delay ミリ秒後に実行したいコードの文字列(この書式は、 eval() を使うのと同様の理由で非推奨です)。

delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。実際の呼び出しはこれより長くなる場合があります。

Internet Explorer では、最初の構文で関数に渡す追加の引数は動作しないことに注意してください。同様の機能を実現させるには、互換コードを使用してください。 (Callback arguments を参照)。

（引用）window.setTimeout – Web API インターフェイス | MDN

「window.setTimeout(func(options_array) , timeout, );」と書けば、
第一パラメータには関数funcの戻り値が渡されるのは明白。

パラメータがある場合には、第三引数以降にパラメータのみを別で渡す必要がある。
「window.setTimeout(func, timeout, options_array);」

ただ、IE非対応・・・別で互換コードを実装する必要があると。

コールバック引数｜window.setTimeout – Web API インターフェイス | MDN

パラメータを渡さなくていい書き方を検討した方が良さそうな感じですね。
雑にオプションをグローバルで渡すか、
クラス化してfuncの内部で別途プロパティーから値を受け取るか・・・。

おとなしく無名で処理する方が無難なのかなとも思いますが。

当サイトにお越しいただきありがとうございます。
当サイトは管理人アルゴリズンが個人で作成を行っているものです。
Google Inc.様とは一切関係はありません。

当サイト内のコンテンツの引用・出典の明記なきものは、
すべて管理人アルゴリズンが著作権を保持するオリジナルコンテンツです。
当サイトでご紹介しております写真等がある場合にも著作権の放棄は致しません。

申し訳ございませんが、無断転載、複製をお断りさせて頂いております。
尚、サイト内コンテンツを引用される際にはご連絡は不要です。
ただし、出典元として当サイト(個別URL)へのリンクをお願いいたします。

コンテンツを有益であると感じていただけましたら非常に光栄です。
ありがとうございます。

記事の作成依頼・更新依頼・削除要請などのご意見ご要望は、
まず、Twitter等よりメンションまたは、メッセージでご連絡を頂けますと幸いです。
@algorhythnn｜Twitter
algorhythnn｜Google+
algorhythnn｜Facebook

運営者はSNS等で個人名等の公開は行わないポリシーで運営しております。
直接のご連絡・取材時などには個人名・屋号でご連絡を差し上げる場合もございますが、
個人名・屋号等をインターネット上で公開されることはご遠慮願います。