マーカーを上から順に落とし（ドロップ）表示する｜Google Maps API v3
GoogleMapsAPIでマーカーを地図上に表示する際に、
上から落としてマーカーを配置するアニメーションを設定できます。
ここでは複数の「マーカーを落として表示」する例についてご紹介します。
一つ一つが順番に落ちてくるよく見るアニメーション効果です。
地図の表示
以下では「マーカーを全て落とす」ボタンを押すと、
マーカーが一気に落ちてきて表示されます。
「マーカーを順番に落として見せる」をクリックすると、
マーカーが順番に落ちてくる動作をします。
「マーカーを削除する」を押すとすべてのマーカーが削除されます。
なお「マーカーを全て落とす」「マーカーを順番に落として見せる」の
どちらを押した場合も一旦すべてのマーカーを削除しています。
マーカーを全て落とす マーカーを順番に落として見せる マーカーを削除する
補足
マーカーを順番に落とすアニメーションを行う場合には、
マーカーの生成を「window.setTimeout()」関数によって、
生成するまでの時間を徐々に遅くするように指定していきます。
window.setTimeout()関数で呼び出す関数名を指定する際に、
パラメータを渡す場合には以下処理ではIE非対応となります。
実際には無名関数を渡すななどの記述の方がスマートになるはずです。
※詳しくは後述の「参考」の部分をご覧ください。
マーカー生成時のオプション指定に対して、
「animation: google.maps.Animation.DROP」を設定するのは、
通常のドロップ効果と同じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//マーカーのタイムアウト生成 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>」部分は、
ページ表示用の高さ制御用のタグです。
|
1 |
<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div> |
CSS
CSSではclass=”aspect”に対して、 幅100%を指定し、 高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style type="text/css"> .aspect{ width:100%; height:50vw; } .aspect_normal, .aspect_dot, .aspect_key, .aspect_dotkey{ width:100%; height:25vw; } #gmap_canvas, #gmap_canvas_normal, #gmap_canvas_dot, #gmap_canvas_key, #gmap_canvas_dotkey, div.g_canvas{ width:100%; height:100%; } </style> |
JavaScript
上記の補足説明の通りです。
ここでは便宜上、JavaScriptのファイル上からボタンを出力しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<button class ="gmap_btn" id="drop" onclick="dropMakers();"/>マーカーを全て落とす</button> <button class ="gmap_btn" id="drop" onclick="dropMaker_wt();"/>マーカーを順番に落として見せる</button> <button class ="gmap_btn" id="del" onclick="deleteMakers();"/>マーカーを削除する</button> <script type="text/javascript"> //global var markers = []; var gmap_canvas; var map_div = document.getElementById("gmap_canvas"); var points = [ {location:"姫路城", latlng:{lat: 34.839450, lng:134.693903}}, {location:"大手門（姫路城）", latlng:{lat:34.83605 , lng:134.6931199}}, {location:"菱の門（姫路城）", latlng:{lat:34.8386654 , lng:134.6924566}}, {location:"いの門（姫路城）", latlng:{lat:34.839149 , lng:134.692505}}, {location:"ろの門（姫路城）", latlng:{lat:34.8393545 , lng:134.6927349}}, {location:"はの門（姫路城）", latlng:{lat:34.8395619 , lng:134.6930339}}, {location:"にの門（姫路城）", latlng:{lat:34.8396451 , lng:134.693265}}, {location:"ほの門（姫路城）", latlng:{lat:34.839660 , lng:134.693602}}, {location:"への門（姫路城）", latlng:{lat:34.839550 , lng:134.694236}}, {location:"との一門（姫路城）", latlng:{lat:34.839373 , lng:134.694409}}, {location:"との二門（姫路城）", latlng:{lat:34.839411 , lng:134.694480}}, {location:"との四門（姫路城）", latlng:{lat:34.839064 , lng:134.694884}}, {location:"ちの門（姫路城）", latlng:{lat:34.839325 , lng:134.694375}}, {location:"りの門（姫路城）", latlng:{lat:34.838754 , lng:134.694153}}, {location:"ぬの門（姫路城）", latlng:{lat:34.8388135 , lng:134.6934537}}, {location:"るの門（姫路城）", latlng:{lat:34.838744 , lng:134.693244}} ]; var lcnt = points.length; //地図を描画 function init(){ gmap_canvas = new google.maps.Map(map_div,{ center: points[0].latlng, zoom : 17, mapTypeId : google.maps.MapTypeId.ROADMAP }); //dropMakers(); } //マーカーの生成と表示 function create_marker(options){ //ここで生成したマーカーを順次格納する var maker = new google.maps.Marker(options); markers.push(maker); } //マーカーを落とす function dropMakers(){ //既にあるマーカーを一旦削除 deleteMakers(); //新たに生成 var i=0; for (i=0; i < lcnt; i++){ marker = create_marker({ map: gmap_canvas, position: points[i].latlng, title:points[i].location, animation: google.maps.Animation.DROP }); //markers.push(marker); } } //マーカーのタイムアウト生成 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 deleteMakers(idx=null) { if(idx == null){ //生成済マーカーを順次すべて削除する for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; //参照を開放 }else{ //生成済マーカーからID指定されたマーカーを削除 for (var i = 0; i < markers.length; i++) { if(idx.indexOf(i) >= 0){ markers[i].setMap(null); } } } } google.maps.event.addDomListener(window,"load",init); $('#ver').text(google.maps.version); </script> |
別途、GoogleMapsAPIのライブラリを読み込む記述が必要です。 ご自分が取得されたAPIキーを以下のコードの(YourAPIkey)部分に置き換えて設定してください。
|
1 2 |
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script> |
参考
上記のサンプルコードでは「window.setTimeout」呼び出しに、
無名関数を直接定義している為、処理できているようですが、
別途定義の関数名を渡した場合でかつ、パラメータがある場合、
タイムアウト指定が効きませんでした。（以下参考）
逆にだから無名ファンクションで指定しているという事ですね。
検索してみた所、以下のような記述も。
おっしゃる通り、ディレイは発生しませんでした（即実行）。
引数いるなら
setTimeout(test,1000,v);
引数いらないなら
setTimeout(“test()”,1000);
または
setTimeout(test,1000);
という感じですsetTimeout(test(v),1000);setTimeout(test(),1000,v);ネットではこの方法を書いてるところがありましたが、間違ってます
test()関数は呼ばれますが指定した時間のあとではなく即呼ばれます
普通の関数の書き方から考えて第一引数に渡されるものがtest()を実行した返り値ですし
あと、下の方はv使われません
MDNのサイトでも以下のように書かれています。
パラメータは第三引数以降にする構文が正です。
構文
timeoutID: window.clearTimeout で使われる、数値の ID 。func:delayミリ秒後に実行したい関数。code:delayミリ秒後に実行したいコードの文字列(この書式は、 eval() を使うのと同様の理由で非推奨です)。delay: 関数呼び出しを遅延させるミリ秒(1/1000 秒)。実際の呼び出しはこれより長くなる場合があります。Internet Explorer では、最初の構文で関数に渡す追加の引数は動作しないことに注意してください。同様の機能を実現させるには、互換コードを使用してください。 (Callback arguments を参照)。
「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等で個人名等の公開は行わないポリシーで運営しております。
直接のご連絡・取材時などには個人名・屋号でご連絡を差し上げる場合もございますが、
個人名・屋号等をインターネット上で公開されることはご遠慮願います。
公開日：
