Webページに地図を埋め込む

Google Maps APIは，Googleが自社の提供する地図サービス「Google Maps」の基本的な機能を，誰もが自分のサイトに組み込んで利用できるようにするためのもので，無料で公開されています．Google Maps API の本体は，JavaScriptという言語で書かれたライブブラリファイルです．つまり，Google Maps API は，JavaScriptという言語によるライブラリとして提供されています．検索機能やルート探索機能はありませんが，Google Mapsのスクロール地図を自分のWebページに埋め込んで操作できるほか，JavaScriptを使って地図上にマーカやアイコンや線を加えることも可能です．また，他の多様なサービスと連携させることで，コンテンツを地図に追加することが可能となります．
APIには様々なものがありますが，こちらにそのリファレンスがあります．リファレンスを参照することで，どのようなAPIがあり，それをどのように利用できるのかについての情報を得ることができます．

準備（アカウント登録，API Keyの取得）

最初に，Google Maps APIを利用するための登録ページにアクセスします．登録ページは，こちら（http://code.google.com/intl/ja/apis/maps/signup.html）を参照してください．

apigetpage1

上のページの下のほうに，APIのKey生成のためのボタンがあります．ここでは，登録時に地図を埋め込む自分のWebサイトのURLを登録する必要があります．従って，あらかじめ自分のWebサイトのURLを把握しておいてください．利用条件に同意して登録作業を行うと，そのURLに対応するGoogle Maps API Keyが表示されます．

apigetpage1

このKeyはあとでAPIを利用する際に必要となるので，必ずどこかにコピー＆ペーストしておいて，後で利用できるようにしておいてください．なお，仮にKeyを失念してしまった場合であっても，登録したURLから再度同じURLで登録すれば同じKeyを取得できます．）登録したURLの配下のホルダにはすべてこのキーを利用することができます．
なお，Google MAPS APIを使うためにはGoogleアカウントが必要です．持っていない場合にはメールアドレスを登録することで取得できます．

HTMLページの作成

テキストエディタを利用して，以下のようなサンプルコードを記述します．
このコードを作成するためにはエディタが必要です．エディタはどのようなものでもOKですが，文字コードをUnicode（UTF-8）としてファイルを作成する必要があります．このため，UTF-8に対応したエディタ（例えば，「秀丸」や「ez-HTML」など）を利用します．
メモ帳などで日本語（Shift-JIS）形式で保存してしまうと，Google Earthで開いたときに日本語の文字化けが発生しますので，注意が必要です．

地図を表示するためのサンプルコード


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Google Map</title>

	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;
	key=（ここに登録したKeyを貼り付け）" type="text/javascript" 
	charset="utf-8"></script>

    <script type="text/javascript">
    //<![CDATA[
   function load() {
      var map = new GMap2(document.getElementById("mymap"));
      map.setCenter(new GLatLng(35.043279, 135.745332), 17);
    }
	onload = load;
	onunload = GUnload;
    //]]>
    </script>
  </head>
  <br>
  <br>
  <h3>マップを表示させてみる</h3>
  <br>
  <body>
    <div id="mymap" style="width: 500px; height: 500px"></div>
  </body>
</html>

ファイルをサーバにアップロードし，ブラウザで開く

ポイント

上記のリストのうち，以下の部分に注目します．

Google Maps APIの本体は，JavaScriptで書かれたライブラリです．APIを使うページでは，そのJavaScriptを都度，Googleのサーバからダウンロードしてきます．その指示をしているのが上の部分です．
この部分に含まれるKeyとしては，上のGoogleのAPIのサイトで登録したURLに対して付与されたKeyを書き込みます．Google側ではここに指定したKeyと実際に地図サービスが利用されているURLとを照合して，合っていればJavaScriptプログラムを送り返してきます．

次のポイントは，以下の部分です．

var map=・・・の行が実行されると，HTML内の"mymap"というidが付いている要素がGoogleMap地図に置き換わります．その次の行では，北緯35.043279度, 東経135.745332の地点を地図の中心に据えています．最後の17は，拡大レベルの指定です．数が大きくなるほど拡大率が上がります．
onload = load;の行で，ページがブラウザにロードされた時点（onload）で，上の処理を実行するようにブラウザに指示します．最後の行では，別のページに移動する時など，地図が表示されなくなる瞬間に実行したい処理を書いています．InternetExplorerではこの処理を行わないとメモリリークが発生してしまうため，（見た目にはこの処理がなくても動きますが）GUnload関数を書いておくことがよいようです．
最後は，以下の部分で，HTML文書中で地図を置く場所の指定です．

これで，縦横500pxの地図がWebに埋め込まれます．

演習課題

自分のWebサイトでGoogle Maps APIを利用するためのキーを以下で取得する．
Google Maps API
早稲田（大久保）キャンパスの緯度・経度を調査する．調査は以下のサイトを利用して行うことができる．
緯度・経度算出(For GoogleMap)
Geocoding
調査した緯度と経度を利用し，マップを表示させるためのHTMLを作成する．
作成したHTMLをFTPを利用してWebサーバにアップし，表示を確認する．

Webサイトサンプルはこちら

自分のお気に入りの場所のマップを含む自己紹介ページを作成する．
作成したHTMLをFTPを利用してWebサーバにアップし，表示を確認する．