中国歴史小説「知兵之将」

今、鈴元仁は歴史小説をブログで連載しています。

内容は、二千二百年前(!)の古代中国です。

始皇帝・項羽・劉邦・韓信・張良・虞美人・呂太后、、、

これらの名前にピンと来た方、あるいは、

郡県制・儒教・陰陽思想・法家思想・孫子兵法、、、

こういったことどもにちょっと興味をそそられる方、

よろしければ読んでやってください。

もしお気に入れば、ついでにランキング投票も。

« 毛球寶兒2006/07/26 | メイン | 台北四十八時間 06/06/29PM01:00 »

GoogleMaps活用するぞ!(10) - マーカーを変えてみよう

(カテゴリ:GoogleMaps

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>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxxxxxxxxxxxxxxxxxxxxxxxxx"
type="text/javascript"></script>

<script type="text/javascript">

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>


<body onload="load()" onunload="GUnload()">

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

<div id="map" style="width: 500px; height: 450px"></div>
<div id="message"></div>

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

</body>
</html>

010_01.JPG

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



(参考)アイコンのプロパティ(property)一覧

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

プロパティ属性解説
imageStringアイコン本体のイメージのURL
shadowStringアイコンの影のイメージのURL
iconSizeGSizeアイコン本体のイメージのピクセルサイズ
shadowSizeGSizeアイコンの影のイメージのピクセルサイズ
iconAnchorGPointアイコンが地図上に置かれる、アイコンのイメージの左上(と地図上で定義した点)との相対的なピクセル座標
infoWindowAnchorGPointインフォウィンドウが置かれる、アイコンのイメージの左上との相対的なピクセル座標
printImageStringプリントした地図で使われる、アイコン本体のイメージのURL。これは、imageプロパティで与えられたメインのアイコンと同じサイズでなければならない。
mozPrintImageStringFirefox/Mozillaにおいてプリントした地図で使われる、アイコン本体のイメージのURL。これは、imageプロパティで与えられたメインのアイコンと同じサイズでなければならない。
printShadowStringプリントした地図で使われれる、アイコンの影のイメージのURL。これは、GIFイメージにしたほうがいい。なぜならばほとんどのブラウザはPNGイメージをプリントできないからである。
transparentStringInternet Explorerでクリックイベントを受けたときに使われる、半透明バージョンのアイコン本体のイメージのURL。これは、メインのアイコンイメージの不透明度(opacity)1%・24bitPNGバージョンで、しかも同じ形とサイズにしたほうがいい。
imageMapArray of NumberInternet Explorer以外のブラウザでアイコンイメージのクリック可能な箇所を特定するために使われるべき、イメージマップ(image map)のx/y座標を表す整数列。

トラックバック

このエントリーのトラックバックURL:
http://suzumoto.s217.xrea.com/mt/mt-tb.cgi/2122

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

Powered by
Movable Type