[JS]観光写真に最適なGoogle Mapsを使った地図ベースの画像ギャラリー

マルチレベルに写真画像を表示するGoogle Mapsを使ったHTML5+XMLで実装した画像ギャラリーを紹介します。

Multi-level Photo Map

[ad#ad-2]

Multi-level Photo Mapのデモ

デモではGoogle Mapsを使って、それぞれの場所に対応した写真画像が表示されます。

デモページ

各地図のカメラアイコン、各写真画像をクリックすると、写真画像は拡大して表示されます。
右の拡大画像をクリックすると、Lightbox風エフェクトで更に拡大表示されます。

デモページ

右下のアイコンをクリックすると、地図に写真画像が配置されて表示されます。

デモページ

[ad#ad-2]

データの管理

画像ギャラリーで使用する画像や地図のローケーションなどはXMLで管理されています。

XML

<place>
	<name>Bangkok</name>
	<location>
		<lat>13.696693336737654</lat>
		<lng>100.57159423828125</lng>
	</location>
	<photos>
		<photo>
			<thumb>photos/Bangkok/thumbs/1.jpg</thumb>
			<source>photos/Bangkok/1.jpg</source>
			<description>Some description</description>
			<location>
				<lat>13.710035342476681</lat>
				<lng>100.52043914794922</lng>
			</location>
		</photo>
		<photo>
			...
		</photo>
	</photos>
</place>

ライセンス

ライセンスはCC By 2.0で、個人でも商用でも無料で利用できます。