GooleマップをWebサイトで利用する手順

　Googleマップの「マイマップ」で地図を作成して、作成した地図のURLをメールで知らせる、自分のサイトに地図を埋め込む、また、Google Earth で表示する、などの手順は、「第36回 地図サイトの利用」でまとめた。その中で、「サイトに地図を埋め込む」は簡単で便利である。しかし、複数の「目印」や「写真」を取り入れて作った「マイマップ」をサイトに埋め込むと、マップの読み込みに時間がかかり、サイト全体の表示が遅く感じられ、折角閲覧にきた訪問者に嫌われてしまう。そこで、マイマップを「サイトに地図を埋め込む」のではなく、「リンクで別のページで表示」させ、サイトの負荷を分散させる。今回は、マイマップを「自分のWebサイトで利用する」手順をまとめた。いろいろ実験して分かったことは、Googleマップのマイマップで作った「kml ファイル」、「Google Maps API Key」を使って作った「html ファイル」、その「html ファイル」にリンンクを貼る、これらはすべて同じフォルダに格納されていなけば使用できないことです。次の手順で話を進めます。

Google Maps API Keyを取得する

　「シオタキンクして写真を地図上に表示する」という機能がある。「ジオタギング」(GeoTagging)とは、写真や動画などのデータに、緯度・経度といった位置情報(ジオタグ)を関連付ける作業のことで、このサービスを行うサイトもある。位置情報のフォーマットとしては、Exif 情報の一部として埋め込まれる形式のほか、Google Earth の標準フォーマットであるKML(またはその圧縮ファイルであるKMZ)やGeoRSS がある。
　GeoRSS とは、RSSの一部として位置情報を盛り込んだもので、基本的にはRSS として扱うことができる。この「ジオタギング」をすることで、写真などがGoogleマップ上やGoogle Earth 上で、その位置に表示することができる。自分のWebサイトでGoogleマップ上に、この位置情報のフォーマット（KML,KMZ,GeoRSSなど）されたファイルを読み込みんで表示させるためには、「Google Maps API　Key」が必要です。その「Key」の取得方法は、次の通りです。

●新しいプロジェクトの作成

　APIキーを取得するには、まずGooge APIs Consoleを使って、作成するアプリケーション用のプロジェクトを一つ作成し、そのプロジェクトで使用するAPIとして、Google Maps API V3をONにすることで取得する。

Google Maps API

URL:　https://code.google.com/apis/console

図1．上表のURLをクリックすると、下記の画面が表示されるので、「 Google アカウント」を入力して、「Sign in」をクリックする(�@)。

図2．下記画面で「Create project...」をクリックする（�@）。

図3．「Googe APIs Console」画面が表示がされる。Googe APIs Consoleではプロジェクトを作成し、そのプロジェクトで使用するAPIを設定することができる。最初は自動的に「API Project」という名前のプロジェクトが自動的に作成され、そのプロジェクトが開いた状態となっている。画面左上に表示されているのが現在開いているプロジェクトの名前です。このままでも使用できるが、名前を変更することも出来る。名前を変更する場合は、「Rename...」をクリックする(�@)。

図4．新しい名前を入力するダイアログが表示されるので、「プロジェクトの名前」を入力し(�@)、「Save」をクリックする(�A)。

●プロジェクトでGoogle Maps API V3を有効にする

　利用可能なAPI一覧から、Google Maps API V3を有効にする。

図5．プロジェクト名が変わる(�@)。次の「Services」をクリックする(�A)。

図6．画面中央に利用可能なAPI一覧が表示されるので、「Google Maps API v3」を探して、その右側に表示されている「OFF」の左側あたりをクリックする(�@)。

図7．「Google Maps/Google Earth APIs Terms of Service」が表示される。よく読んで頂き同意できる場合には画面左下の「I agree to these terms.」の左側をチェックした上で(�@)、「Accept」クリックする(�A)。

図8．「Google Maps API v3」の右側の表示が「ON」に変わっていれば準備は完了です(�@)。

●APIキーの取得

　画面左側メニューで「API Access」をクリックすると画面中央にAPIキーが表示される。

図9．画面左側メニューで「API Access」をクリックすると(�@)、画面中央にAPIキーが表示される。このAPIキーを今後使用するのでメモしておく(�A)。次に、「Edit allowed referers...」をクリックする(�B)。

●APIキーが利用可能なドメインを指定

　APIキーはWebページなどに記述するため誰でも見ることができる。自分のAPIキーが他のサイトなどで勝手に使われないように、APIキーが利用可能なドメインを設定しておく。

図10．ダイアログが開くので、利用を許可するドメインを入力する。1行に1つずつです。下記では「http://homepage2.nifty.com/shigemichi/*」と入力しているが、これは「http://homepage2.nifty.com/shigemichi/」以下の全てのURLで利用を許可しています。入力が終わりましたら(�@)、「Update」をクリックする(�A)。

図11．これで、「Google Maps API key」を取得することができました。この「Key」と「URL」を忘れないように保存しましょう。

　　　　　　　　　　　　　　top へ

Googleマイマップを別のページで表示させる

　Googleマップのマイマップで作成した地図を別のページに表示させる方法は、簡単なやりかたがあるかもしれないが、私の手順を記述します。
　　Gooleアカウントを取得する。
　　Google Maps API keyを取得する。
　　Gooleマップで、マイマップを作る。
　　kmlファイルを作って、アップロードする。
　　緯度・経度・ポイントを取得する。
　　Gooleマップを表示させる htmlファイルを作成する。
　
　このhtmlファイルをアップロードすれば、完成です。
私は、目印や写真が少ない場合は、マイマップをhtmlに組み込んでいます。容量が大きくなる場合は、今回の手順をあまり使わず、「GPS ezToure」ソフトを使っています。このソフトで、htmlファイルで保存する際に、「API Key」が必要です。

Googleマップでマイマップを作る

　Googleマップでマイマップの作り方は、やさしい講座「第36回地図サイトの利用」の 「Googleマップの「マイマップ」でルートマップを作る」を参照してください。
　注意することは、画像ファイルを使ったマイマップを作るときで、複数のサーバーでGoogle Maps API を使用するときです。マイマップで使用する画像ファイルは、いろいろな制限付きのサーバーに登録しないことです。画像ファイルを登録したサーバーのサイトでは使えますが、他のサーバーのサイトが、画像を登録しているサーバーを参照しようとしても、画像が表示されない場合があります。

kml ファイルを作ってアップロードする

●kml ファイルの作り方

　kml ファイルの作り方は、やさしい講座「第36回地図サイトの利用」で [ルートマップを「Google Earth」で表示する」の 「Googleマイマップのkmlファイルの作り方」を参照してください。

●kml ファイルのアップロード

　kml ファイルをアップロードするサーバーは、もちろん「Google Maps API Key」を取得したときに指定した「ドメイン」です。 ここでは、nagano.kml ファイルをgooglemap フォルダに格納して、サーバーにアップロードした。 URLは、
http://mikisky40.web.fc2.com/googlemap/nagano.kml です。

　　　　　　　　　　　　　　top へ

画面の大きさ、緯度・経度およびpointの値を取得する

　「画面の大きさ」や「緯度・経度・ポイント」を変更するが、その値を取得する方法は次の通りおです。

図1．マイマップを立ち上げて、「長野の地図」を表示して、「このページのリンク」をクリックする。

図2．「HTMLを貼り付けてサイトに地図を埋め込みます」の下にある「埋め込み地図のカスタマイズとプレビュー」をクリックする。

図3．「サイトに地図を埋め込む場合は、このHTMLをコピーして貼り付けます。」 の下の枠の中のHTMLをすべて選択して、右クリックから「コピー」をクリックする。

図4．「メモ帳」に貼り付ける。「画面の大きさ」widthが「www」で、heightが「hhh」�@、「ll=」の後の「YY.YYYYYY」 が緯度で、「,」の後の「XXX.XXXXXX」が経度であると判断した�A。 「Point」は、z=zzと判断して�B、各々の値を記録する。ここでは、width=600、height=400、緯度＝36.688574で、経度＝138.3150393、point=12 です。

　　　　　　　　　　　　　　top へ

Googleマップを表示させるhtmlファイルを作成する

　さて、ここまでは順調進んできたが、ここから先はどうすれば良いか分からなくなってきた。そこで、インターネットで、「GeoRSS」で検索したところ、「[マイマップ]をGoogle Maps API を使って描画する」のなかで、「このKMLは、Google Maps APIを使えば下のようにオーバーレイ表示できる。」を見つけた。このページのHTMLを利用させて頂くことにした。ところが、このサイトが開かなくなった。
　この手順で作ったソースが今現在動作しているので、このソースを元に話を進める。
　このソースを7箇所変更すると、出来上がりです。
　　�@タイトル名を変更する。
　　�A自分のGoogle Maps API keyに変更する。
　　�B<h1>タグをタイトル名と同じにする。
　　�C画面の大きさを変更する。
　　�D緯度・経度を変更する。
　　�EPoint（地図の拡大ポイントと判断した）を変更する。
　　�FアップロードしたkmlのURLに変更する。
　　�GアップロードしたkmlのURLに変更する。

ソースを変更する

　図5のソースを下記の内容で変更する。
　　�@は、Map Nagano
　　�Aは、自分のGoogle Maps API key
　　�Bは、Map Nagano
　　�Cは、widht=600、height=400
　　�Dは、緯度=36.688574、経度=138.3150393
　　�Eは、point=12
　　�F�Gは、http://mikisky40.web.fc2.com/googlemap/

図5.　マップを表示させるソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 15.0.12.0 for Windows" /> <title>タイトル名</title>�@ <style> <!-- h1 { font-size: 14px; } --> </style> <script src="http://maps.google.com/maps?file=api&v=2.x& key=自分のGoogle Maps API keyに変更"　�A type="text/javascript"> </script> </head> <body> <h1>タイトル名と同じ</h1>　�B <div id="map" style="width:600px;height:400px;　�C float:left;"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); var point = new GLatLng(緯度,経度);　�D map.setCenter(point, 拡大ポイント);　�E var url = window.location.search; var i = url.indexOf('?url=サーバーにアップロードした kml ファイルのURL');　�F url = (i != -1) ? decodeURIComponent(url.substr(i+5)) : 'サーバーにアップロードした kml ファイルのURL'; map.addOverlay(new GGeoXml(url));　�G //]]> </script> </body> </html>

　　　　　　　　　　　　　　top へ

htmlファイルで格納および確認する

　上記、ソースを名前を付けて、htmlファイルにして保存する。
ここでは、「googlemap」フォルダに、「naganoMAP.html」で保存する。 そして、保存したhtml ファイルを実行してGoogleマップが表示されるかを確認する。

図6.　保存した「naganoMAP.html」ファイルをダブルクリックすると、長野のマイマップが表示されることを確認する。

　　　　　　　　　　　　　　　top へ

リンクで実行する

図7.「html ファイルで格納および確認する」の項目の図6で、保存した「naganoMAP.html」ファイルを同じサーバーの同じ「googlemap」フォルダにアップロードする。

図8.　ここで、保存した「naganoMAP.html」にリンクする。下記のリンクをクリックしてください。 　「Google Maps API」を利用して、マイマップ長野」を表示する。

図9.　もう一つ「okukujiMAP.html」を作りました。下記のリンクをクリックしてください。 　「Google Maps APIを利用して、マイマップ奥久慈」を表示する。

　どうですか、Gooleマップが表示されたでしょう。冒頭でも述べましたが、Googleマップのマイマップで作った「kml ファイル」、「Google Maps API Key」を使って作った「html ファイル」、その「html ファイル」にリンンクｌを貼る、これらはすべて同一のWebサイト（サーバー）に格納されていなけば使用できないことです。これで、GooleマップﾟをWebサイトで利用する手順は終わります。皆さんも、トライして楽しんでください。

　　　　　　　　　　　　　　　　topへ