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パーソナライズに表示する方法

スポンサードリンク

• 2006年2月 7日 21:51
• カテゴリー Google

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

to-Rについて

JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。

書いてる人

西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア

株式会社トゥーアールについて

渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

検索

著書

Web制作の現場で使う
jQueryデザイン入門
[改訂新版]

JavaScript
コーディング
ベストプラクティス

スポンサードリンク

カテゴリー

• AWS [4]
• React [5]
• Angular [5]
• TypeScript [1]
• JavaScript [130]
• jQuery [59]
• CSS [95]
• HTML [19]
• iPhone [20]
• Android [31]
• Movable Type [72]
• WordPress [11]
• Facebook [6]
• Google [20]
• PHP [43]
• SEO [62]
• SEM [11]
• writer [108]
• seminar [107]
• Mac [7]
• server [15]
• Firefox [22]
• direction [7]
• tools [72]
• design [26]
• works [9]
• books [88]
• dialy [84]

アーカイブ

• 2021年11月 [3]
• 2021年10月 [2]
• 2021年5月 [1]
• 2020年5月 [1]
• 2020年1月 [3]
• 2019年5月 [4]
• 2019年4月 [1]
• 2019年1月 [1]
• 2018年12月 [1]
• 2018年7月 [1]
• 2018年3月 [2]
• 2021年 [6]
• 2020年 [4]
• 2019年 [6]
• 2018年 [5]
• 2017年 [11]
• 2016年 [15]
• 2015年 [44]
• 2014年 [41]
• 2013年 [62]
• 2012年 [66]
• 2011年 [100]
• 2010年 [85]
• 2009年 [96]
• 2008年 [149]
• 2007年 [213]
• 2006年 [143]
• 2005年 [66]

最近のエントリー

• AWS CloudFrontで特定ディレクトリを別のS3ストレージを割り当てる
• Nuxt.js / Next.jsで作成したサイトをGitHub ActionsでAWS S3にデプロイする
• AWS CloudFront FunctionsでBasic認証を設定する
• AWS SAM のtemplate.yamlをdeploy環境ごとに切り替える
• AWS Lambda(Node.js)でJimpを使って画像のバリデーションを行う
• IE11が終わる日
• 自宅ネットワーク高速化の道のり
• もう、SP用のWebデザインを倍の解像度で作るのをやめよう
• ReactのuseRefを再描画がかからないState管理として利用する
• TypeScriptのインデックス シグネチャでオブジェクトのキーの型を指定する

© 2005 to-R some Rights Reserved.