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

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

概要

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

地図の表示

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

補足

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

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

//マーカーを落とす
function dropMaker(){
	//既にあるマーカーを一旦削除
	deleteMakers();
	//新たに生成
	marker = create_marker({
		map: gmap_canvas,
		position: points[0].latlng,
		animation: google.maps.Animation.DROP
	});
	markers.push(marker);
}

//マーカーを落とす

function dropMaker(){

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

deleteMakers();

//新たに生成

marker = create_marker({

map: gmap_canvas,

position: points[0].latlng,

animation: google.maps.Animation.DROP

});

markers.push(marker);

}

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

サンプルコード

HTML

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

<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></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%として指定しています。

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

.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のファイル上からボタンを出力しています。

<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.DROP
		});
		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>

<button class ="gmap_btn" id="drop" onclick="dropMaker();"/>マーカーを落とす</button>

<button class ="gmap_btn" id="del" onclick="deleteMakers();"/>マーカーを削除する</button>

//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.DROP

});

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

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

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

参考

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

Marker Animations | Google Maps JavaScript API | Google Developers

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

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

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

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

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

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