地図を簡単に表示『Google Map API』-JavaScript Library Archive

地図を簡単に表示『Google Map API』

配布元：Google Maps API
ライセンス：商業サイトでの利用可

APIの取得

Google Mapで『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 ライブラリ地図表示

直前:footerをウィンドウ下部に固定する『footerFixed.js』

直後:画像に光沢を与えるjsライブラリ『Glossy.js』

地図を簡単に表示『Google Map API』 JavaScript Library Archive