千客万來! かんたん携帯サイト作成講座


本文へジャンプ

7. 携帯版のGoogleマップを貼り付ける



パソコン用サイトであれば、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を起動し「表示」メニューから「備忘ログ ビュー」を選びます。




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

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

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

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


GoogleマップのAPIキーを取得する

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

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

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



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




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



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




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

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




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


Googleマップを携帯のページに表示させる

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

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




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




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

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

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




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

地図の中心となる緯度経度 
→ 緯度経度に書き換え
表示したい場所 → 緯度経度に書き換え
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キーは伏せ字にしています)。



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



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




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



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






いかがでしたか?

ちょっと今回は難しかったかな、、、ゴメンナサイ!!


でも最初に覚えちゃうのが大事!

どうか、この先も頑張ってくださいね!!

 


前へ


他のページへのリンク

1.携帯サイト変換サービス「MSC」の申し込みをする
2.ホームページ・ビルダー14以降で携帯サイトを作成する@
3.作成したサイトをMSCに転送する
4.転送した結果を確認する
5.実際に携帯端末で見てみよう!
6.ホームページ・ビルダー14以降で携帯サイトを作成するA
7.携帯版のGoogleマップを貼り付ける
8.パソコンと共通のURLを設定する(独自ドメインをお持ちの方向け)
9.スマートフォンでもサイトをキレイに表示する


トップへ戻る


(c)Ubiquitous Business Technology, Inc.