blog/2007-11-13

---

Total: 2307 / Today: 1 / Yesterday: 1

GoogleMapsを使いこなせ（その２）

マーカーを加えるにはどうしたらいいのか？マーカーを設置するのに必要な関数は、座標である。最初はピクセルを求めて、それから座標を割り出す事を考えていたが、あまりにも効率が悪いのでマップ上に中心部の座標をフォームに表示して座標を求めることにした。

GEvent.addListener(map, 'moveend', function(){
	document.getElementById("(座標を表示したいフォームの名前)").value = map.getCenter();

これで、マウスでマップを移動させると、中央の座標が、フォームに表示される。あとは、片っ端から座標を登録していくだけだ。データーの登録はサーバー側で行うことにしたが、セキュリティ上問題が現時点では多いのでまだ非公開。呼び出すところの処理はajaxを用いることにした。

GDownloadUrl("(データー格納ファイルへのパス)", function(data, responseCode) {
	if(responseCode == 200) {
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++) {
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
				parseFloat(markers[i].getAttribute("lng")));
			var ename = markers[i].getAttribute("name");
			var marker = createMarker(point,ename);
			map.addOverlay(marker);

なお、ajaxの性質上、別ドメインのデーターは呼び出せないので注意。

で、マーカーとフキダシの処理。

function createMarker(point, title) {
	var marker = new GMarker(point,'');
	var html = "<strong>" + title + "</" + "strong><em>（" + point + "）</" + "em>";
	GEvent.addListener(marker, 'click', function() {
		marker.openInfoWindowHtml(html);

これで、マーカーをポイントに設置し、クリックするとフキダシが出るしくみはできた。後はカスタマイズ次第でいくらでもやれることは増やせる。createMarkerにurlの項目を加えて、<iframe>で外部ページを呼び出すとかね。

しかし、あまりポイントが増えすぎるとどれがどれだかわからなくなる。マーカーの使い分けが必要だ。そこで、登録するデーターにジャンルという項目を加えた。あとはポイントの種類によってマーカーをわけるだけだ。

Icon[0] = new GIcon();	//マーカーアイコンを定義
Icon[0].image = "http://maps.google.co.jp/mapfiles/ms/icons/ltblue-dot.png";	//マーカーアイコンの画像
Icon[0].shadow ="http://www.google.com/intl/ja_jp/mapfiles/shadow50.png"	//マーカーアイコンの画像の影
Icon[0].iconSize=new GSize(32,32);	//マーカーアイコンの大きさ
Icon[0].shadowSize=new GSize(59,32);	//マーカーアイコンの影の大きさ
Icon[0].iconAnchor=new GPoint(16,32);	//マーカーアイコンのポイントの位置
Icon[0].infoWindowAnchor=new GPoint(16,0);	//マーカーアイコンをクリックしたときのフキダシの先端の位置

幸いJavaScriptでも連想配列が使えるので配列名に日本語を使っても問題は無いが・・・。

var Icon = Array();
Icon['桟橋'] = new GIcon();
Icon['桟橋'].image = "http://maps.google.co.jp/mapfiles/ms/icons/ltblue-dot.png";
Icon['桟橋'].shadow ="http://www.google.com/intl/ja_jp/mapfiles/shadow50.png"
Icon['桟橋'].iconSize=new GSize(32,32);
Icon['桟橋'].shadowSize=new GSize(59,32);
Icon['桟橋'].iconAnchor=new GPoint(16,32);
Icon['桟橋'].infoWindowAnchor=new GPoint(16,0);
Icon['マナトンネル'] = new GIcon();
Icon['マナトンネル'].image = "http://maps.google.co.jp/mapfiles/ms/icons/blue-dot.png";
Icon['マナトンネル'].shadow ="http://www.google.com/intl/ja_jp/mapfiles/shadow50.png"
Icon['マナトンネル'].iconSize=new GSize(32,32);
Icon['マナトンネル'].shadowSize=new GSize(59,32);
Icon['マナトンネル'].iconAnchor=new GPoint(16,32);
Icon['マナトンネル'].infoWindowAnchor=new GPoint(16,0);
・・・

こんな感じで拡張していったら長い！ついでに入力も面倒だ。このIcon'(ジャンル名)'?.infoWindowAnchorの.で接続するのはどうにかならんのか。でもまてよ、たしか多元配列も使えたはずだ。となると

var Icon = Array();
Icon['マナトンネル'] = new GIcon();
Icon['マナトンネル']['image'] = "http://maps.google.co.jp/mapfiles/ms/icons/blue-dot.png";
Icon['マナトンネル']['shadow'] ="http://www.google.com/intl/ja_jp/mapfiles/shadow50.png"
Icon['マナトンネル']['iconSize']=new GSize(32,32);
Icon['マナトンネル']['shadowSize']=new GSize(59,32);
Icon['マナトンネル']['iconAnchor']=new GPoint(16,32);
Icon['マナトンネル']['infoWindowAnchor']=new GPoint(16,0);

よし。動いた。

・・・
・・・・・・
・・・・・・・・・

って余計に長くなってどうする！！

まぁ、これが使えると言うことは、次のような表記でもいいはずである。Perlでいう=>が:に変わっただけだ。これで決着。

var Icon = Array();
Icon['マナトンネル'] = new GIcon({
	'image' : "http://maps.google.co.jp/mapfiles/ms/icons/blue-dot.png";
	'shadow' : "http://www.google.com/intl/ja_jp/mapfiles/shadow50.png",
	'iconSize' : new GSize(32,32),
	'shadowSize' : new GSize(59,32),
	'iconAnchor' : new GPoint(16,32),
	'infoWindowAnchor' : new GPoint(16,0)

もっと簡略化はできないか？

var Icon = Array({		
	'地名' : { 
		new GIcon({
			'image' 	: "http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png",
			'shadow'	: "http://www.google.com/intl/ja_jp/mapfiles/shadow50.png",
			'iconSize'	: new GSize(32,32),
			'shadowSize': new GSize(59,32),
			'iconAnchor': new GPoint(16,32),
			'infoWindowAnchor':new GPoint(16,0)

ずいぶんとわかりやすくなったものだ。が、動かなかった。そうなると、1個前のスクリプトが正解のようだ。どうせだったらajaxで・・・

<icons>
<icon name="地名" image="http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png" shadow="http://www.google.com/intl/ja_jp/mapfiles/shadow50.png" iconsize="32,32" shadowsize="59,32" iconanchor="16,32" infowindowanchor="16,0" />
</icons>

いや、やめておこう。urlやサイズなどは共通化するケースが多く、外部ファイル化のメリットないし。

---

Last Modified: 2009-01-17 17:17:46