Google Map API を利用して地図上にカスタムのマーカーを表示する

「地図上にマーカーを表示する」では地図上にマーカーを表示する方法を紹介しましたが、 ここでは Google Maps のデフォルトの（標準の）アイコンを利用していました。

しかし、例えば始点終点で色を変えたい、あるいはポイントの指し示す箇所の情報の種類によって異なるアイコンを使いたい、などの要望はあるかとおもいます。

そのような場合に、カスタムの画像（アイコン）を標準のマーカーの代わりに表示する方法を紹介します。

Google Maps の標準のアイコンではなく、独自のアイコンをマーカーとして表示する

次の例では緑色の矢印とオレンジ色の矢印がマーカーとして表示されています。

カスタムのアイコンが使われていることに加えて、アイコンの上側または下側に指し示すポイントがあることにも注意してください。

コードは次のとおりです。基本は「地図上に線を引く」と同様なので、 アイコンの設定部分だけ抜きだしています。

	...

	// マーカーの設定
	for(i=0;i<latlngs.length;i++){

		// カスタムアイコンの設定
		icon = new google.maps.MarkerImage( 
			'icons.png', 
			new google.maps.Size(32,32),
			new google.maps.Point(32*i,0),
			new google.maps.Point(16, (i==0) ? 32:0));
	
		new google.maps.Marker({
			position: latlngs[i],
			map: map,
			icon: icon,
			draggable: false
		});
	}

	...

カスタムアイコンの作成

ここではまず、次のようなアイコン画像を用意しました。

icons.png

緑色の矢印とオレンジ色の矢印があり、それぞれ 32x32 のサイズです。最初のポイントにはオレンジ色の矢印を、次のポイントには緑色の矢印を表示します。

左上隅を原点 (0,0) としたとき、オレンジ色の矢印の範囲は (0,0) - (32,32)、緑色の矢印は (32,0) - (64, 32) といえます。 また、オレンジ色の矢印の先は (16, 32)、緑色の矢印の先は (48, 0) です。緑色の矢印の先は緑色矢印の開始点 (32,0) からの相対座標で考えれば、(16,0) とですね。

そうした座標を念頭にいれておきつつ、まずはオレンジ色のアイコンの作成方法をみてみましょう。

icon = new google.maps.MarkerImage( 
	'icons.png', 
	new google.maps.Size(32,32),
	new google.maps.Point(0,0),
	new google.maps.Point(16, 32));

アイコンは MarkerImage として作ります。第一パラメータがアイコンファイル名です。 第二引数は画像のサイズ。第三引数は画像ファイル内でのアイコンの左上の座標。第四引数は、そのアイコン内での相対座標として、緯度経度をポイントを場所を指定します。

緑色のアイコンは次のとおりです。

icon = new google.maps.MarkerImage( 
	'icons.png', 
	new google.maps.Size(32,32),
	new google.maps.Point(32,0),
	new google.maps.Point(16, 0));

このように MarkerImage を作成して、Marker 作成時に icon 属性に MarkerImage に設定すれば OK です。