GoogleMaps活用するぞ！（11） - 自作のマーカーを置いてみよう (天懲四月-読書ノート)

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

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

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

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

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

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

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>

<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の具体例：その１

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

天懲四月-読書ノート

mailto:suzumoto3@hotmail.co.jp

GoogleMaps活用するぞ！（11） - 自作のマーカーを置いてみよう

（カテゴリ：GoogleMaps）

カテゴリー

アーカイブ

半徑半里圖會

検索