GoogleMaps活用するぞ！（10） - マーカーを変えてみよう (SUZUMOTO HITOSHI'S BLOG)

Google Mapsデフォルトのマーカーでも、十分役に立てることができす。しかし一種類しかありません。もっとマーカーの色や形をいろいろ変えて分かりやすくしたいと考えるのは、人情というものでしょう。今回は、自分でカスタマイズしたマーカーを用意して地図上に表現することを試みます。

カスタマイズしたマーカーの例

以下は、Google Maps API Documantationで例として挙げられているスクリプトの一部を、整理したものです。上半分の赤字の各行が今回新たに取り上げる、カスタマイズしたアイコンを定義する行です。下半分の黒字の各行は、前回説明したマーカーを打つためのスクリプトです。ただし、赤字の部分が追加されています。これは、上の行で定義した"icon"という変数を用いてマーカーを書くように指定している箇所です。

var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

var point = new GLatLng(34.9144141335787, 135.69767475128174);
var marker = new GMarker(point, icon);
map.addOverlay(marker);

眺めてみて何となくわかると思いますが、上のスクリプトの赤字の行は、カスタマイズしたアイコン（本体と影）が置かれたURL（2・3行目）、アイコンの大きさ（4・5行目）、アイコンが定義された中心点に対して置かれる相対的位置（6行目）、そして（まだ出てきませんが）infoWindowが置かれる相対的位置（7行目）を定義しているのです。Google Maps API DocumantationのClass Referenceに書かれているアイコンのプロパティの詳細については、今回の記事の一番下に訳を置いておきます。

上の例は、Google Ride Finderサービス内で使われている赤色のアイコンと影を引っぱってくるように定義されています。私の調べた限りでは、他に青、紫、白、灰、黄、緑などのアイコンファイルも存在するようです。

試しに、Google Ride Finderから青色と黄色のアイコン本体のファイル、それと両者共通のアイコンの影のファイルを引っぱって表示してみましょう。以下のタグは、赤字の行と箇所以外は前回と同じです。今回二種類のアイコンのために新たに二つの変数"icon1"、"icon2"を追加します。したがって、マーカーに対する変数は前の四つから二つ加わって六つとなります。（"icon1"、"point1"、"marker1"、"icon2"、"marker2"）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());

GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});

map.setCenter(new GLatLng(34.903671401859576, 135.6913661956787), 14);

var icon1 = new GIcon();
icon1.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
icon1.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon1.iconSize = new GSize(12, 20);
icon1.shadowSize = new GSize(22, 20);
icon1.iconAnchor = new GPoint(6, 20);
icon1.infoWindowAnchor = new GPoint(5, 1);

var icon2 = new GIcon();
icon2.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png";
icon2.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon2.iconSize = new GSize(12, 20);
icon2.shadowSize = new GSize(22, 20);
icon2.iconAnchor = new GPoint(6, 20);
icon2.infoWindowAnchor = new GPoint(5, 1);

var point1 = new GLatLng(34.9144141335787, 135.69767475128174);
var marker1 = new GMarker(point1, icon1);
map.addOverlay(marker1);

var point2 = new GLatLng(34.89346406486655, 135.68012237548828);
var marker2 = new GMarker(point2, icon2);
map.addOverlay(marker2);

}
}

</script>
</head>

<table bgcolor="#8d878f" cellspacing="5"><tr><td>
<table bgcolor="#c8b4cb"><tr><td width="520">
<div align="center"><font size="5" color="blue">GoogleMapで世界旅行をしようではないか。</font></div><p>
<table><tr><td width="10"></td><td>
―　つかいかた　―<br>
<font size="1">
・ドラッグすれば、地図がグリグリ移動します。<br>
・ダブルクリックすれば、クリックした地点に地図の中心点が移動します。<br>
・左上のコントロールで、ズームと移動ができます。<br>
・右上の「マップ」を選択すれば地図に、「サテライト」を選択すれば衛星写真に切り替わります。<p>

<br>
<font size="1">*ネッシー、イェティ、UMA、野人、サスカッチ、飛行中のICBM、エルヴィス・プレスリーなどを発見した場合には、あなたの判断で当局に届けるかどうか決めてください。</font>
<br>
</td<td width="10"></td></tr>
</table>
</td></tr></table>
</td></tr></table>

</body>
</html>

こうなるわけです。
しかし、できれば自分で選んだアイコンファイルを置きたい。もっと進んで、自作のアイコンに取り替えたい。次回はそれに挑戦することにしましょう。

（参考）アイコンのプロパティ（property）一覧

例えばアイコンの変数が"icon"であるとすれば、それぞれ　icon.プロパティ　の形で定義していくことになります。

プロパティ	属性	解説
image	String	アイコン本体のイメージのURL
shadow	String	アイコンの影のイメージのURL
iconSize	GSize	アイコン本体のイメージのピクセルサイズ
shadowSize	GSize	アイコンの影のイメージのピクセルサイズ
iconAnchor	GPoint	アイコンが地図上に置かれる、アイコンのイメージの左上（と地図上で定義した点）との相対的なピクセル座標
infoWindowAnchor	GPoint	インフォウィンドウが置かれる、アイコンのイメージの左上との相対的なピクセル座標
printImage	String	プリントした地図で使われる、アイコン本体のイメージのURL。これは、imageプロパティで与えられたメインのアイコンと同じサイズでなければならない。
mozPrintImage	String	Firefox/Mozillaにおいてプリントした地図で使われる、アイコン本体のイメージのURL。これは、imageプロパティで与えられたメインのアイコンと同じサイズでなければならない。
printShadow	String	プリントした地図で使われれる、アイコンの影のイメージのURL。これは、GIFイメージにしたほうがいい。なぜならばほとんどのブラウザはPNGイメージをプリントできないからである。
transparent	String	Internet Explorerでクリックイベントを受けたときに使われる、半透明バージョンのアイコン本体のイメージのURL。これは、メインのアイコンイメージの不透明度（opacity）1%・24bitPNGバージョンで、しかも同じ形とサイズにしたほうがいい。
imageMap	Array of Number	Internet Explorer以外のブラウザでアイコンイメージのクリック可能な箇所を特定するために使われるべき、イメージマップ（image map）のx/y座標を表す整数列。

SUZUMOTO HITOSHI'S BLOG

mailto:suzumoto3@hotmail.co.jp

GoogleMaps活用するぞ！（10） - マーカーを変えてみよう

（カテゴリ：GoogleMaps）

（参考）アイコンのプロパティ（property）一覧

トラックバック

コメントを投稿

リンク

カテゴリー

アーカイブ

半徑半里圖會

検索