マーカーを弾ませて（バウンド）表示する ｜Google Maps API v3
GoogleMapsAPIでマーカーを地図上に表示する際に、
単に表示するのではなく、上から落としてマーカーを配置するアニメーションを設定できます。
ここでは１つの「マーカーを弾ませて表示」する例についてご紹介します。
バウンス効果で表示する例についてです。
地図の表示
以下では「マーカーを弾ませて表示する」ボタンを押すと表示されたマーカーが上下に動きます。
「マーカーを削除する」を押すとすべてのマーカーが削除されます。
なお「マーカーを弾ませて表示する」を押した場合も一旦すべてのマーカーを削除しています。
マーカーを弾ませて表示する マーカーを削除する
補足
マーカーを弾ませるアニメーションを行う場合には、
通常のアニメーション表示を行う場合に１行を追加するだけです。
マーカー生成時のオプション指定に対して、
「animation: google.maps.Animation.BOUNCE」を設定するだけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//マーカーを落とす function dropMaker(){ //既にあるマーカーを一旦削除 deleteMakers(); //新たに生成 marker = create_marker({ map: gmap_canvas, position: points[0].latlng, animation: google.maps.Animation.BOUNCE }); markers.push(marker); } |
※コードの全体は以下に記載しています。
サンプルコード
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 |
<button class ="gmap_btn" id="drop" onclick="dropMaker();"/>マーカーを弾ませて表示する</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}} ]; //地図を描画 function init(){ gmap_canvas = new google.maps.Map(map_div,{ center: points[0].latlng, zoom : 14, mapTypeId : google.maps.MapTypeId.ROADMAP }); dropMaker(); } //マーカーの生成と表示 function create_marker(options){ var m = new google.maps.Marker(options); return m; } //マーカーを落とす function dropMaker(){ //既にあるマーカーを一旦削除 deleteMakers(); //新たに生成 marker = create_marker({ map: gmap_canvas, position: points[0].latlng, animation: google.maps.Animation.BOUNCE }); markers.push(marker); } //マーカーを削除する function deleteMakers() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; } 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> |
参考
Marker Animations | Google Maps JavaScript API | Google Developers
当サイトにお越しいただきありがとうございます。
当サイトは管理人アルゴリズンが個人で作成を行っているものです。
Google Inc.様とは一切関係はありません。
当サイト内のコンテンツの引用・出典の明記なきものは、
すべて管理人アルゴリズンが著作権を保持するオリジナルコンテンツです。
当サイトでご紹介しております写真等がある場合にも著作権の放棄は致しません。
申し訳ございませんが、無断転載、複製をお断りさせて頂いております。
尚、サイト内コンテンツを引用される際にはご連絡は不要です。
ただし、出典元として当サイト(個別URL)へのリンクをお願いいたします。
コンテンツを有益であると感じていただけましたら非常に光栄です。
ありがとうございます。
記事の作成依頼・更新依頼・削除要請などのご意見ご要望は、
まず、Twitter等よりメンションまたは、メッセージでご連絡を頂けますと幸いです。
@algorhythnn｜Twitter
algorhythnn｜Google+
algorhythnn｜Facebook
運営者はSNS等で個人名等の公開は行わないポリシーで運営しております。
直接のご連絡・取材時などには個人名・屋号でご連絡を差し上げる場合もございますが、
個人名・屋号等をインターネット上で公開されることはご遠慮願います。
公開日：
