« 毛球寶兒2006/07/28 | メイン | 借気 - 木屋町 »

GoogleMaps活用するぞ!(11) - 自作のマーカーを置いてみよう

(カテゴリ:GoogleMaps

前回の例では、Google Ride FinderのアイコンをGoogleサイトから読み出して、表示しました。これを自分のサイトから自作のアイコンを読み出すように、設定を変更すればよいのです。

以下の例では、サイト内の同じフォルダに地図ページとアイコンファイルを置いて設計しています。つまり、[map]というディレクトリ=フォルダでAPI Keyを登録したとすれば、


[map] - maptest01.html ----->Google Mapsを埋め込んだ地図ファイル
hide.png ----->自作のアイコンファイルその1
mitsu.png ----->自作のアイコンファイルその2


というファイル構成で設計しています。

自作のマーカーを作るには


マーカーは、アイコン本体のファイル影のファイルから成っています。このうち影のファイルは、透過色指定ができるPNG、GIFなどの形式で作らないとうまく表示できません。専用ソフトを持っている人ならば、影をかっこよく作るようチャレンジすればいいと思います。しかしそこまで作る技量のない(私のような)人ならば、アイコン本体だけ作って貼り付けることももちろん可能です。ファイルの形式はJPEG、PNG、GIFなどが適当だと思います。いっぱんにPNGファイルはJPEG、GIFよりもサイズ数が大きくなる傾向があるのですが、私が作った単純な2色のファイルのばあい、JPEGよりもむしろファイルサイズが小さくなりました。

私は、例としてこのようなファイルを作りました。


ファイル名:mitsu.png サイズ:20ピクセル×20ピクセル
ファイル名:hide.png サイズ:20ピクセル×20ピクセル

この二つのファイルを使って、前回のスクリプトを以下のように書き換えます。
注意するべきは、一つは今回影のアイコンファイルを用意しないので、影のアイコンファイルを指定する行を削っていることです。もう一つは、Google Mapsを埋め込んだhtmlページと同じディレクトリ=フォルダにアイコンファイルを置いているため、URLを変更していることです。上半分の赤字の部分で、"hide.png"と"mitsu.png"をアイコンとして指定してし、それぞれ"icon1"及び"icon2"の変数に用意しています。下半分の緑字の部分で、"icon1""icon2"の変数を使って、Google Mapsの上にアイコンを書き込みます。



var icon1 = new GIcon();
icon1.image = "mitsu.png";
icon1.iconSize = new GSize(20, 20);
icon1.iconAnchor = new GPoint(6, 20);
icon1.infoWindowAnchor = new GPoint(5, 1);

var icon2 = new GIcon();
icon2.image = "hide.png";
icon2.iconSize = new GSize(20, 20);
icon2.iconAnchor = new GPoint(6, 20);
icon2.infoWindowAnchor = new GPoint(5, 1);


var point101 = new GLatLng(34.9144141335787, 135.69767475128174);
var marker101 = new GMarker(point, icon1);
map.addOverlay(marker101);

var point201 = new GLatLng(34.89346406486655, 135.68012237548828);
var marker201 = new GMarker(point, icon2);
map.addOverlay(marker201);

以上の設定を使って、下のようなタグのページを書いてみました。今回は二個だけでなくて多数のマーカーを地図上に落としています。ただし、下では省略しています。マーカーの数を三個、四個、、、と増やすためには、マーカーのための変数を変えて、追加してください。(下の例では、"pointxxx"と"markerxxx"の"xxx"の数字を変えたファイルを順次追加しています)

<!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 = "mitsu.png";
icon1.iconSize = new GSize(20, 20);
icon1.iconAnchor = new GPoint(6, 20);
icon1.infoWindowAnchor = new GPoint(5, 1);

var icon2 = new GIcon();
icon2.image = "hide.png";
icon2.iconSize = new GSize(20, 20);
icon2.iconAnchor = new GPoint(6, 20);
icon2.infoWindowAnchor = new GPoint(5, 1);


var point101 = new GLatLng(34.9144141335787, 135.69767475128174);
var marker101 = new GMarker(point101, icon1);
map.addOverlay(marker101);

var point102 = new GLatLng(34.908633821168436, 135.6767749786377);
var marker102 = new GMarker(point102, icon1);
map.addOverlay(marker102);


≪ここは省略されています≫


var point201 = new GLatLng(34.89346406486655, 135.68012237548828);
var marker201 = new GMarker(point201, icon2);
map.addOverlay(marker201);

var point202 = new GLatLng(34.90155964310935, 135.6764316558838);
var marker202 = new GMarker(point202, icon2);
map.addOverlay(marker202);


≪ここは省略されています≫


}
}

</script>
</head>


<body onload="load()" onunload="GUnload()" bgcolor="#b188f7">

<table><tr><td width="510">
<div align="center"><font size="4" color="white"<b><GoogleMapで見る山崎大合戦></b></font></div>
<div align="center">- 天正十年(1582)六月十三日夕刻の布陣 -lt;/div><br>
<img src="mitsu.png">明智光秀方(総兵力15,000)   <img src="hide.png">羽柴秀吉方(総兵力35,000)
<table cellspacing="2" bgcolor="black"><tr><td>
<div id="map" style="width: 500px; height: 450px"></div>
</td></tr></table>
<div id="message"></div>

</body>
</html>

下をクリックすれば、今回作った例を具体的に表示したページが表れます。(もちろん、Googleから取得したAPI Keyをページ内に埋め込んであります。)



Google Mapsの具体例:その1


敵よりずっと少ない兵力で、しかも地形的にこのような布陣では、明智光秀が圧倒的に不利な戦いであったことがよくわかります。どうしてこのようになったのでしょうか?― 次回は、ポリライン(直線)をGoogle Mapsの上に導入することにします。ついでに、明智・羽柴両軍の進撃経路を地図上に落としてみましょう。