CYBER@GARDEN

home > Web::Blogoscope > Google Maps API解説

Web::Blogoscope

Google Maps API解説

先日のほったらかし温泉ではGoogle Maps APIを利用して地図を埋め込んだが(現在は埋め込まずに単純にリンクさせています)、友人知人から「どうやるのか簡単に教えて」という要望がいくつか寄せられた。

公式のドキュメンテーション(Google Maps API Documentation)が公開されているが、設置の際に気づいた点も含めて、導入手順とカスタマイズ方法をまとめてみる。

まずはAPI Keyの取得

Sign UpからGoogle Maps API Keyを取得する。利用条件に同意し、サイトのURLを入力すればAPI Key生成される。Keyの取得にはGoogleアカウント(無料)が必要。

設置の前に

正しいXHTML文書への埋め込みが推奨されている

Google Mapsは、正しいXHTML文書への埋め込みが、またレンダリングモードは標準準拠モード(standards compliant mode)が採用されることが推奨されている。

試したところでは、HTML 4.01でも文書型宣言なしでも問題なく表示された(Firefox 1.0.7とWin IE 6で確認)が、script要素(後述参照)では内容をCDATAセクションとするので、厳密にはXHTMLでなければならない。

レンダリングモードについては、XHTML文書でXML宣言を記述してしまうと、Win IE 6では過去互換モードが採用されてしまう。ただ、過去互換モード(つまりXML宣言を記述したまま)でも問題なく表示されたので、この点はそれほど気にしなくてもよさそうである。

エンコードはUTF-8

Google Mapsを埋め込むページのエンコードはUTF-8。もしShift_JISなど他のエンコードを採用している場合は、UTF-8ベースの別ページを作ってインラインフレーム(iframe要素)で呼び出したほうがよい。他のエンコードのまま呼び出すと、Win IE 6でエラー表示され、Google Mapsが読み込めない場合がある。

現状はインラインフレームとして表示させるのが安全

これは私の環境に基づくが、ページのエンコードがUTF-8であっても、Win IE 6のエラー表示はなくならなかった。インラインフレームを経由して呼び出す方法にしたらエラー表示がなくなった。したがって、エンコードに関わらず、インラインフレーム経由でGoogle Mapsを埋め込んだほうが安全だと思う。

インラインフレームを呼び出すページの文書型をStrictではなくTransitionalにしなければならないが、この点は目をつぶる。もちろん元々Transitionalであれば問題はない。

シンプルな例

ソース

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
//]]>
</script>

サンプル(google_maps1.html)

解説

div要素ではstyle属性で地図の幅(width)と高さ(height)を指定する。

公式のドキュメンテーションのサンプルでは、Key情報を含めたscript要素がhead要素内に書かれているが、必ずしもhead要素に含めなくてもよい。ここでは、div要素の直後に書いておくとしよう。src属性では取得したあなたのKeyを指定する。

map.centerAndZoom()メソッドで地図の中心点の経度と緯度を指定する(139.70352172851562, 35.68757466560839)。

経度と緯度を算出するための地図を用意したので、ご利用ください。

また、map.centerAndZoom()メソッドでは地図の縮尺を指定する(4)。値が小さければズームインされた地図で、値が大きければズームアウトされた地図で表示される。

移動/縮尺ボタンをつける

ソース1

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
//]]>
</script>

サンプル(google_maps2.html)

解説1

map.addControl(new GSmallMapControl());という記述を含めることで、地図上に移動/縮尺ボタンを表示することができる。

ソース2

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
//]]>
</script>

サンプル(google_maps3.html)

解説2

GSmallMapControl());の「Small」を「Large」に変更することで、縮尺ボタンにスライドバーを表示することができる。

マップ/サテライト切り替えボタンをつける

ソース

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
//]]>
</script>

サンプル(google_maps4.html)

解説

map.addControl(new GMapTypeControl());という記述を含めることで、地図上にマップ/サテライト切り替えボタンを表示することができる。

なお、script要素のsrc属性のURLが「maps.google.co.jp」の場合、切り替えボタンは「マップ」と「サテライト」の2つ。「maps.google.com」に変更した場合、切り替えボタンは「マップ」と「サテライト」と「ハイブリッド」の3つになる。ただし、日本国内の地図情報は「ハイブリッド」に対応していないようだ。

マーカーを表示させる

ソース

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
var point = new GPoint(139.70352172851562, 35.68757466560839);
var marker = new GMarker(point);
map.addOverlay(marker);
//]]>
</script>

サンプル(google_maps5.html)

解説

変数pointで経度と緯度を取得し、変数markerGMarkerをその位置に表示させるようにし、map.addOverlay()メソッドの引数にmarkerと指定してマーカーを生成させる。ここでは地図の中心点とマーカーの位置に同じ経度と緯度を指定しているが、もちろん異なる経度と緯度でもよい。

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

ソース1

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
var point = new GPoint(139.70352172851562, 35.68757466560839);
var marker = new GMarker(point);
map.addOverlay(marker);
var offset = new GSize(0, -20);
map.openInfoWindow(map.getCenterLatLng(), document.createTextNode("新宿駅"),
offset);
//]]>
</script>

サンプル(google_maps6.html)

解説1

変数offsetは、インフォウィンドウの初期位置をマーカーの「黒丸」の部分にするための指定。GSizeの引数の1番目がx軸、2番目がy軸上の移動位置(ピクセル値)。別に「黒丸」の部分を初期位置にしなくてもよいが、何となく。

map.openInfoWindow()メソッドで、インフォウィンドウの中身を指定する。document.createTextNode()メソッドの引数として含めた文字列が、インフォウィンドウ上に表示される。なお、この方法では文字列が指定できるだけで、リンクの設定などマークアップを指定することはできない。マークアップを指定するには、次の方法を利用する。

追記 ( また、Firefox 1.5やOpera 8.5では、なぜか文字列が縦書きになってしまうという問題がある。次の方法では縦書きが回避できる。

ソース2

<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.70352172851562, 35.68757466560839), 4);
var point = new GPoint(139.70352172851562, 35.68757466560839);
var marker = new GMarker(point);
map.addOverlay(marker);
var offset = new GSize(0, -20);
map.openInfoWindowHtml(map.getCenterLatLng(),
'<div style="width: 200px">
<a href="http://ja.wikipedia.org/wiki/%E6%96%B0%E5%AE%BF%E9%A7%85"
target="_top">新宿駅</a><br />東京都新宿区<br />よく利用する駅です。
</div>', offset);
//]]>
</script>

(引数に含めたマークアップを途中で改行していますが、実際は改行しないで記述してください)

サンプル(google_maps7.html)

解説2

インフォウィンドウでマークアップを指定するには、map.openInfoWindow()メソッドではなくmap.openInfoWindowHtml()メソッドを利用する。内容にリンク(a要素)を含める場合は、target属性で「_top」と指定しておく(リンク先がインラインフレーム内に表示されるのを防ぐため)。

追記 ( なお、<div style="width: 200px"></div>でラップしているのは、Firefox 1.5やOpera 8.5では内容が縦書きになってしまうという問題を回避するためである(2005-12-10)。

追記 ( モダンブラウザを前提にするのであれば、<div style="white-space: nowrap"></div>としても縦書きの問題が回避できるようだ(2005-12-11)。

Posted on 2005-11-21T23:12+09:00 | Category: Webトレンド

トラックバックPings

トラックバックのURI:
http://www.cybergarden.net/mt/mt-tb.cgi/256

» グーグルマップ(Google Maps)に近い日本SGIが「GEO-Element」機能注目 from 無料インターネットサービス日記
グーグルマップ(Google Maps)に近い日本SGIが「GEO-Element」機能注目 日本SGIは3次元地図アプリケーション開発ツールキット「G... [Read More]

Tracked on 2005-12-12T22:23+09:00

» グーグルサイトマップ(Google Sitemap)日本語版でサイトクロールが分かる from グーグルの世界(GOOGLE WORLD)
グーグルサイトマップ(Google Sitemap)日本語版でサイトクロールが分かる  グーグル(Google)は、ユーザーが自分のサイトをGoog... [Read More]

Tracked on 2005-12-12T22:25+09:00

» Google MAPS APIを使っってみる from しゅうのブログ
Google MAPS APIをちょっとだけ使っってみる。 参考サイト Google Maps API解説 かなりむずかしいので、コピペ。コ... [Read More]

Tracked on 2006-01-20T12:37+09:00

» Google Maps from PARADISE BLOG
マッピングサービスを利用した地図画像に、変換するプラグインを導入して見ました シ... [Read More]

Tracked on 2006-05-14T01:25+09:00

» Google Maps API解説 from MovableType研究ブログ
Web::Blogoscope: Google Maps API解説... [Read More]

Tracked on 2006-05-19T16:52+09:00

» Google Map API KeyはローカルIPでも取得出来た from エセプログラマーの戯言
ここ数年、さまざまなところで利用されている「Google Map」。 このGoogle Mapを利用するためには、「Google Map API K... [Read More]

Tracked on 2008-01-19T06:16+09:00

コメント

 はじめまして。私もいま、googleを導入しようと思っている者ですが、ひとつ疑問が。初期画面で地図の縮尺率をこちらが指定して表示することは可能なのでしょうか。お知りでしたらぜひ、ご教授ください。

Posted by こるべ on 2007-05-16T09:46+09:00

ひとつ目のソースをご覧ください。
map.centerAndZoom()メソッドの「4」というのが縮尺率(ズーム度合い)です。この値を適当にイジってあげると、お好みのズーム度合いで表示されます。

Posted by 益子 on 2007-05-17T19:37+09:00

« XHTML+CSS集中講座 | ブログトップ | 夕刊フジBLOGのタブ広告 »