Google Map を使いこなす

このエントリーをはてなブックマークに追加

Googleから無料で貸し出ししているGoogleMapをWEBサイトに埋め込む方法です
※GoogleMap ver2に対応しています。

APIの取得

GoogleMapからGoogle Map APIキーを取得してくる必要があります。

GoogleMapで『sign up for an API key』をクリックしてAPIキー発行ページに移動後、注意事項に同意してGoogleMapを使用するサイトのURLを記入、『Generate API Key』を押してAPIキーを発行します。

※APIキーの取得にはgoogleアカウントが必要です。

Google Mapを使ってみる

Google Maps API Keyページで発行されるhtmlソースは自サイトに直接アップするとこんな感じになります。
Google Maps sample1

Shift_JISで表示する

Shift_JISであげるとIE6でスクリプトエラーが出ます。
スクリプト要素にcharset="UTF-8"を追加することによりこのエラーは回避できます

<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript" charset="UTF-8" ></script>
<script type="text/javascript" charset="UTF-8" >
//<![CDATA[
function load() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(37.4419, -122.1419), 13);
	}
}
//]]>
</script>

Google Maps sample2

表示する場所とズームを変更する

map.setCenter(new GLatLng(経度,緯度), ズーム率);

を変更する事ににより表示する場所、表示する倍率を変更することができます。

経度、緯度に関しては緯度 経度 検索というサービスを利用すると簡単に取得できます。
ズームに関しては0~17の数値を入れます。数値が大きいほどより拡大された地図が表示されます。

試しに大阪城を表示する場合は以下のように変更すると表示されるようになります

<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript" charset="UTF-8" ></script>
<script type="text/javascript" charset="UTF-8" >
//<![CDATA[
function load() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(135.526985,34.68526), 13);
	}
}
//]]>
</script>

Google Maps sample3

移動とズームのコントローラーをつける

map.addControl(new GLargeMapControl());

を追加することにより移動とズームのコントローラーを追加することができます。

<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript" charset="UTF-8" ></script>
<script type="text/javascript" charset="UTF-8" >
//<![CDATA[
function load() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.setCenter(new GLatLng(135.526985,34.68526), 13);
	}
}
//]]>
</script>

Google Maps sample4

ポインターを表示する

var point = new GLatLng(経度,緯度);
var marker = new GMarker(point);
map.addOverlay(marker);

を追加することにより任意の場所にポインターを表示することができます。

<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript" charset="UTF-8" ></script>
<script type="text/javascript" charset="UTF-8" >
//<![CDATA[
function load() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.setCenter(new GLatLng(135.526985,34.68526), 13);
		var point = new GLatLng(34.685699,135.527129);
		var marker = new GMarker(point);
		map.addOverlay(marker);
	}
}
//]]>
</script>

Google Maps sample5

自作のポインターを使用する

var icon = new GIcon();
icon.image = "アイコンファイル";
icon.iconSize = new GSize(アイコン幅,アイコン高さ);
//アンカーポイントと画像の左上角からの相対オフセット値
icon.iconAnchor = new GPoint(,高さ);
var point = new GLatLng(経度,緯度);
var marker = new GMarker(point,icon);
map.addOverlay(marker);

ポインターを表示する際のコードをこのように書き換えると自作のポインターを使用することができる。
ポインターを作成する際はpng形式で保存するとよいでしょう(透過gifも使えますが境界がぼやけてしまうので)

<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript" charset="UTF-8" ></script>
<script type="text/javascript" charset="UTF-8" >
//<![CDATA[
function load() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.setCenter(new GLatLng(135.526985,34.68526), 13);
		var icon = new GIcon();
		icon.image = "icon.png";
		icon.iconSize = new GSize(20,30);
		icon.iconAnchor = new GPoint(20,30);
		var point = new GLatLng(34.685699,135.527129);
		var marker = new GMarker(point,icon);
		map.addOverlay(marker);
	}
}
//]]>
</script>

Google Maps sample6

インフォウィンドウを表示させる

var point = new GLatLng(経度,緯度);
var offset = new GSize(ポインタからの高さ,ポインタからの幅);
map.openInfoWindowHtml(point,'表示したいhtml', offset);

インフォウィンドウを表示します。
※GoogleMAp ver1ではFireFoxやoperaでは縦書きになってしまうバグがあった為

<div style="width: 200px">表示したいhtml</div>

とdiv要素で包む必要があります。

<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript" charset="UTF-8" ></script>
<script type="text/javascript" charset="UTF-8" >
//<![CDATA[
function load() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.setCenter(new GLatLng(135.526985,34.68526), 13);
		var icon = new GIcon();
		icon.image = "icon.png";
		icon.iconSize = new GSize(20,30);
		icon.iconAnchor = new GPoint(20,30);
		var point = new GLatLng(34.685699,135.527129);
		var marker = new GMarker(point,icon);
		map.addOverlay(marker);
		var offset = new GSize(0, -20);
		map.openInfoWindowHtml(point,'<a href="http://www.osakacastle.net/" target="_blank">大阪城</a><br />大阪の名所', offset);
	}
}
//]]>
</script>

Google Maps sample7

※sampleではpointをポインター用の物と同じものを使用しています。

閉じたインフォウィンドウを再度表示する。

インフォウィンドウを閉じた後、アイコンをクリックすることにより表示する方法。

GEvent.addListener(marker,"click",function(){
map.openInfoWindowHtml(point,'表示したいhtml', offset)
})

このコードを追加することにより閉じたインフォウィンドウが再度開きます。

<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript" charset="UTF-8" ></script>
<script type="text/javascript" charset="UTF-8" >
//<![CDATA[
function load() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.setCenter(new GLatLng(135.526985,34.68526), 13);
		var icon = new GIcon();
		icon.image = "icon.png";
		icon.iconSize = new GSize(20,30);
		icon.iconAnchor = new GPoint(20,30);
		var point = new GLatLng(34.685699,135.527129);
		var marker = new GMarker(point,icon);
		map.addOverlay(marker);
		var offset = new GSize(0, -20);
		map.openInfoWindowHtml(point,'<a href="http://www.osakacastle.net/" target="_blank">大阪城</a><br />大阪の名所', offset);
		GEvent.addListener(marker,"click",function(){
			map.openInfoWindowHtml(point,'<a href="http://www.osakacastle.net/" target="_blank">大阪城</a><br />大阪の名所', offset)
		})
	}
}
//]]>
</script>

Google Maps sample8

関連エントリー

Google Sitemapを使いこなす
『Google Base』、ベータ版が提供開始
無料のウィルスソフトもあるGoogle Pack
無料の写真編集ソフトPicasaを使ってみる
del.icio.usの内容をgoogleパーソナライズに表示する方法

スポンサードリンク

«Web Designer 2.0 進歩し続けるWebデザイナーの考え方-長谷川 恭久 | メイン | サイトのFaviconを作成する。»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1481
コメントを投稿