Google Maps API・マイマップの使い方・活用法をご紹介しています。

マーカーを弾ませて(バウンド)表示する |Google Maps API v3

GoogleMapsAPIでマーカーを地図上に表示する際に、
単に表示するのではなく、上から落としてマーカーを配置するアニメーションを設定できます。
ここでは1つの「マーカーを弾ませて表示」する例についてご紹介します。
バウンス効果で表示する例についてです。

 

地図の表示

以下では「マーカーを弾ませて表示する」ボタンを押すと表示されたマーカーが上下に動きます。
「マーカーを削除する」を押すとすべてのマーカーが削除されます。
なお「マーカーを弾ませて表示する」を押した場合も一旦すべてのマーカーを削除しています。

 

 

補足

マーカーを弾ませるアニメーションを行う場合には、
通常のアニメーション表示を行う場合に1行を追加するだけです。

マーカー生成時のオプション指定に対して、
「animation: google.maps.Animation.BOUNCE」を設定するだけです。

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

 

サンプルコード

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)部分に置き換えて設定してください。

 

参考

Animation constants|Google Maps JavaScript API V3 Reference  |  Google Maps JavaScript API  |  Google Developers

Marker Animations  |  Google Maps JavaScript API  |  Google Developers


公開日:

コンテンツ
すべて展開 | すべて省略