Google Maps導入支援ページ（その1・概要）

Google Mapsは、地図表示サービスの中ではよく使われています。
特に、自分のWebページにGoogle Mapsの地図を埋め込むことができる点が良いです。

↓Google Mapsの例
東京タワー(東京都港区芝公園４丁目２?８)の地図を表示中です。
しばらくお待ちください。

ただ、自分のサイトにGoogle Mapsを埋め込もうとすると、JavaScriptのプログラムを書く必要があり、誰にでもできるというものではありませんでした。
そこで、一般的なGoogle Mapsを表示するためのJavaScriptを、簡単に自動出力できる「Google Maps導入支援ページ」というものを作ってみました。
上に表示されているGoogle Mapsも、この「Google Maps導入支援ページ」で作成したものです。

1.Google Maps API Keyの取得

Google Mapsをご自分のWebページに表示するには、まず「Google Maps API Key」を取得する必要があります。

こちらのページに接続し、ページの最後の方にある「I have read and agree with the terms and conditions」の前にあるチェックボックスをオンにします。
そして、「My web site URL」の欄にご自分のサイトのURLを入力して、「Generate API Key」のボタンをクリックします。

すると、ページが変わって、Google MapsのAPI Keyや、サンプルのJavaScript等が表示されます。
「Your key is:」の箇所に、英数字のAPI Keyが表示されますので、それをコピーしておきます。

2.easy_googlemaps.jsのダウンロード

次に、「easy_googlemaps.js」というJavaScriptをダウンロードします。
以下のリンクをクリックしてzipファイルをダウンロードします。

EasyGooglemaps_1_01.zip

そして、このファイルを解凍してeasy_googlemaps.jsを取り出し、ご自分のサーバーにアップロードしておきます。

3.Webページのヘッダー部分の書き換え

次に、Google Mapsを表示したいWebページで、ヘッダー部分（<head>～</head>）に以下のようなタグを入れます。
なお、「API Key」と「アップロード先」の部分（赤字の部分）は、ご自分の環境に合わせて書き換えます。 

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=API Key" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://アップロード先/easy_googlemaps.js" charset="utf-8"></script>

4.Google Maps導入支援ページでJavaScriptを作成する

次に、Google Maps導入支援ページで、Google Mapsを表示するためのJavaScriptを作成します。

Google Maps導入支援ページ

設定項目が多数ありますが、最低限設定する必要があるのは、以下の項目です。

項目内容
表示したい場所の住所表示したい場所の住所を指定します。その位置が地図の中心になります。
地図の表示先のdiv要素に割り当てるID地図はdiv要素の中に表示されます。そのdiv要素に割り当てるIDを決めて入力します。
他の要素と重複しないIDを指定する必要があります。
地図の幅／地図の高さ地図のサイズをピクセル単位で指定します。

これら以外の項目の内容については、明日解説します。
もっとも、いろいろと設定をいじって地図を表示してみれば、各設定項目の内容は大体お分かりいただけると思います。

設定が終わったら、ページを下の方にスクロールして、「送信」のボタンをクリックします。

5.サンプルの確認

設定を送信すると、Google Maps導入支援ページの最後の「サンプルの表示」の箇所に、設定に沿ったGoogle Mapsのサンプルが表示されます。
そのサンプルで表示が良いかどうかを確認します。
設定を修正する場合は、ページの上の方に戻って各箇所を修正し、再度「送信」のボタンをクリックします。

6.ご自分のWebページにコードを貼り付ける

サンプルで表示を確認したら、「HTMLに貼り付けるコード」の欄に表示されているコードをコピーします。
そして、ご自分のWebページのHTMLを編集する状態にして、地図を表示したい位置に、コピーしたコードを貼り付けます。
作業が終わったら、貼り付け後のHTMLファイルをサーバーにアップロードして、地図の表示を確認します。

7.Blogに貼り付ける場合

Blogの個々の記事にGoogle Mapsを表示したい方も多いと思います。
ただ、Blogでは記事内の改行がbrタグに自動変換されることが一般的です。
しかし、JavaScript内の改行までbrタグに変換されることが多く、そのままではJavaScriptがエラーになり、地図が表示されません。

主なBlogシステムで、Google MapsのJavaScriptを貼れるかどうかについては、後日順次アップしていきたいと思います。