【Javascript】Google Maps+YUIメニューツリー

Google Maps+YUIメニューツリー

---

1: 今回のサンプル
2: ソース1
3: ソース2 mktreebyarray4.js

今回からは、今まで紹介してきたツールやWebサービスと他のサービスを組み合わせて新しいサービスを作成する、という方法を試してみます。

とりあえず、今回は、Google Mapsと前回 までのYUIメニューツリーを組み合わせます。

まず、仕上がりを先に見てみましょう。下図の通り、左にYUIメニューツリー、右にGoogle Mapsが表示され、メニュークリックと連動して、地図が変ります。

今回のサンプル

→サンプル

今回のサンプルを開くと、ツリーメニューとGoogle Mapsが表示されます。 ツリーメニューの作り方は前回以前の記事を、 Google Mapsの利用方法はこちらをご参照下さい。

Google Maps APIの最新バージョンがv2になっていますので、今回はv2のクラスGMap2を利用しました。APIキーを書くURLの「&v=1」を「&v=2」に変更することでv2用のクラスが利用できますが、クラス構成が異なりますので、詳細は、v1との違いについての情報Google Maps API Version 2 Upgrade Guideなどをご参照ください。

動作ブラウザ
win
	m1	f1	e6	o8	o9
	○	○	○	○	○
mac
	m1	f1	o8	o9	s1.2	s2
	○	○	○	○	×	○
Linux
	m1	f1	o8	o9	k3
	○	○	○	○	○

まず、今回使っているJSON配列のデータを見てみましょう。階層の頭に["_open"]があるので、このJSONを読み込むと、 北海道/東北などの階層がオープンされて、右図の通り表示されます。

//経緯度は日本測地系
//utf-8(BOM付)
[
	["県名を選んでください",
		[
			["_open"],
			["北海道/東北",
				[
				["北海道","141.35046","43.06197"],
				["青森県","140.74365","40.82178"],
				["秋田県","140.10626","39.71539"],
				["岩手県","141.15547","39.70096"],
				["山形県","140.36702","38.23746"],
				["宮城県","140.87549","38.26594"],
				["福島県","140.47157","37.74733"]
				]
			],
			["関東",
				[
				["東京都","139.69487","35.68627"],
				["群馬県","139.0638","36.38779"],
				["栃木県","139.88673","36.56242"],
				["茨城県","140.45047","36.33791"],
				["埼玉県","139.65221","35.85421"],
				["千葉県","140.12637","35.60131"],
				["神奈県","139.64578","35.44445"],
				["山梨県","138.57152","35.66302"]
				]
			],
					:
				   (中略)
					:

			["九州/沖縄",
				[
				["福岡県","130.41806","33.60078"],
				["佐賀県","130.30139","33.24616"],
				["長崎県","129.87575","32.74123"],
				["大分県","131.61493","33.23479"],
				["熊本県","130.7438","32.78617"],
				["宮崎県","131.42601","31.90745"],
				["鹿児県","130.5600","31.55750"],
				["沖縄県","127.68269","26.20836"]
				]
			]
		]
	]
]

このように、JSONをTreeメニューの階層に合わせて記述するだけで、簡単に折りたたみメニューを作ることが可能です。 今回のソースは次ページの通り。