ホームページ・ビルダー15, 14, 13 かんたん携帯サイト作成講座第7章

パソコン用サイトであれば、Googleマップの貼り付けは、ホームページ・ビルダー14のナビメニューからで簡単にできるのですが、携帯サイトには残念ながら対応していません。

でも、HTMLソースに地図表示のHTMLを手入力で書き加えることで、携帯サイトでもGoogleマップを表示することができるんです！　ここではその方法を説明しましょう。ちょっとHTMLソースの書き換えとコピー＆ペーストの操作が大変かもしれませんが、頑張ってください！

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
パソコン、携帯サイトに限らずGoogleマップの利用が初めての方でしたら、まず最初にGoogleマップのAPIキーを取得します（必須の作業です）。

Googleマップを表示するためには、大きく分けると以下のような流れになります。

　　1. Googleから「Google MAPS API」を取得します。
　　2. 表示したい場所の緯度経度を調べます。
　　3. それらを用いてHTMLソースに地図表示のHTMLを手入力で書き加えます。

この「Google MAPS API」や緯度経度をメモしておく必要があるでしょう。これには、ホームページ・ビルダー14の「備忘録」というメモを保存できる機能を使うと便利なんです！　まずホームページ・ビルダー14の備忘録を使えるようにしましょう。

①ホームページ・ビルダー14を起動し「表示」メニューから「備忘ログビュー」を選びます。

③画面右側を見てください。窓の表示が変わって、上に「メモ」下に「履歴」と表示されます。

「メモ」部分には何も書かれていないはず。ここは何でもかんでもテキストのメモを残しておける欄なのです。しかも入力した内容は、ホームページ・ビルダーを終了しても次回起動したときには特に保存などしなくともそのまま残っているのです。

この便利な｢備忘録｣の機能を利用して、これから取得する「Google MAPS API」や緯度経度をここに残しておくとよいでしょう。

では、次にGoogleマップのAPIキーの取得へと進みます。

①パソコンのブラウザで、

http://code.google.com/intl/ja/apis/maps/signup.html　

へアクセスします。次のような画面が表示されます。

利用規約をよく読んで、同意できれば画面下に表示されているチェックボックスをクリックします。そして、取得済みの、MSCの携帯サイトのURLを入力します。

②最後に、「APIキーを生成」ボタンをクリックします。すると画面が切り替わって次のような画面になります。
この画面の、一番上に「Your key is:」と表示された下の灰色のボックスの中に書かれている英数字が「APIキー」です（ここでは伏せ字にしてあります）。

③このAPIキーを、先ほど③のホームページ・ビルダーの「メモ」欄にコピー＆ペーストしてください（ここでは伏せ字にしてあります）。

⑤次に、地図で表示したい場所の経緯度を調べます。Googleマップにアクセスをして、その場所の住所を入力します。

⑥検索した場所が、「A」というふうにピンポイントで表示されます。この「A」にカーソルを合わせ、右クリックをするとメニューが表示されます。表示されたメニューの「この場所について」を選びます。

⑦「A」と表示されている赤い矢印の後ろに緑色の矢印が表示され、上部の検索ボックスに、その場所の緯度経度が表示されます。この緯度経度も、先ほどのAPIキーと同様に、ホームページ・ビルダーの「メモ」欄にコピー＆ペーストしておきましょう。

⑧地図を表示させるページをホームページ・ビルダーで開きます。

⑨地図を表示したいところに、なんでもかまわないので文字を入力し、その文字を選択してください。
これは、HTMLソースを見たときに、どこに地図を表示するHTMLソースをコピー＆ペーストするかの目印を付けるためのものです。ここでは「map」と入力し、その3文字を選択しました。

⑩「HTML ソース」タブをクリックします。⑨で目印として入力した「map」が反転して表示されています。

⑪「map」と反転している部分に、地図を表示する下記のHTMLソースを、コピー＆ペーストしてください。

<img src="http://maps.google.com/staticmap
?center=地図の中心となる緯度経度
&markers=表示したい場所,red
&zoom=16
&size=200x200
&key=APIキー">

以下のようになればＯＫです（ ※図ではペーストしたことを強調するため反転表示していますが、実際には反転表示にはなりません）。

⑫コピー＆ペーストした中の以下の箇所を書き換えます。

地図の中心となる緯度経度　→　緯度経度に書き換え
表示したい場所　→　緯度経度に書き換え
APIキー　→　APIキーに書き換え

【例】たとえば

緯度経度が　　　　　　35.689422,139.691656　
取得したAPIキーが　 ABCDEFGHIJKLMOPQRSTUVXWZ

の場合は下記のようになります。

<img src="http://maps.google.com/staticmap
?center=35.689422,139.691656
&markers=35.689422,139.691656,red
&zoom=16
&size=200x200
&key=ABCDEFGHIJKLMOPQRSTUVXWZ">

実際には以下のようになります（APIキーは伏せ字にしています）。

⑬「ページ編集」タブをクリックします。地図自体は表示されませんが、表示場所はアイコンで示されています。

⑭まず、地図がきちんと表示表示されるかを、パソコンのブラウザで確認をしてみましょう。インターネットに接続している状態でツールバーの「Internet Explorer の起動」アイコンをクリックします。

すると、地図が表示されました。

ＭＳＣサーバーへ転送して、実際の携帯電話でも確認してみましょう。