ちょっと前にも書きましたが、飲食店の場所なんかを携帯サイトで探している時、そこに地図が表示されていなかったらたどり着くのに時間がかかってしまいますよね。
それだけならまだしも、場所が分からなくて結局別のお店にしました・・・なんて可能性も。
そこで、今回は携帯サイトへの地図画像の埋め込み方を順を追ってご紹介いたします。
ポイントは、
■ 無料で使える地図
■ 別サイトへのリンクではなく、自分のサイト内で地図を表示する
■ JavaScriptなどを必要としない、HTMLタグで生成される静的画像
この3点ですね。
GoogleMap(グーグルマップ)編
Googleマップ゚「編」と書いてはみたものの、今回の紹介はコレだけです(笑
ちなみに手段としてGoogleから推奨されている方法と、ちょっとグレーな方法の2つがあるのですが、ここでは当然ながら前者のほうをご紹介します。1日あたりの表示回数に制限がありますが、「携帯ブラウザ毎に、ユニーク画像1000枚」※ということらしいので、よっぽどの大型携帯サイトでない限り問題ないですね。
※厳密には違いますが、分かりやすく言うとドコモで1000枚、auで1000枚、ソフトバンクで1000枚、みたいな感じ。しかも「ユニーク」なので、同じ人の場合はカウントしない。
基本的にはこちらのページに書かれている内容を解説していきます。
■ Google Static Maps API - Google Code
(1) Googleのアカウントを取得する
まずはGoogleのアカウントが必要となります。すでに持っている方はそれで大丈夫です。
これも無料でとれますので、この機にGmailなどでアカウントをとっておくとよいかと思います。
■ Gmailでアカウント取得
さて、次からは地図の表示に使う、各パラメータを設定していきましょう。
(2) GoogleMapsのAPIキーを取得する
すでに取得したGoogleアカウントでAPIキーを取得します。
他に必要なものとして、地図を表示する予定のページのURLがあります。
まずこちらへアクセス
■ Sign Up for the Google Maps API - Google Maps API - Google Code
するとページの一番下に入力フォームがあります。

上記にURLを入力。ログインしていない場合は、ログイン画面を経て・・・

こんな感じでキーが生成されます。このキーが後で必要となりますのでコピーしておきましょう。
記入例:key=ABQIAAAAbax_NhWfG******************************
**************の部分はアカウントやURLによって変わってきます。
(3) 地図の中心点を決める
地図の中心、また、のちに出てくるマーカーの位置などは緯度経度情報を使って指定します。
緯度経度の導き出し方は様々ありますが、こちらのページからやるのが一番簡単かと。
■ みんなの知識【ちょっと便利帳】 緯度経度を調べる(GoogleMapsAPI・地図作成用座標取得ツール,10進数)

緯度経度情報は小数点6ケタで指定します。上のページならちょうど6ケタで計算されます。
記入例:center=35.666111,139.763689
緯度、経度の順番です。
(4) 地図のズームレベルを決める
表示する地図の拡大、縮小サイズを決定します。
これも先に説明したちょと便利帳のページで「現在のズーム値」として表示されていますので参考になります。
携帯サイト用の地図なら、だいたい15~17くらいが合うのではないかと思います。
記入例:zoom=17
(5) 地図のサイズを決める
地図の画像サイズを決めます。
携帯サイト用の画像となるので、横幅は240ピクセル以内で指定するのが良いでしょう。
ただ機種によってはもう少し横幅がせまいものもありますので、220~230位が無難でしょうか。
記入例:size=230x200
横幅、縦幅の順です。真ん中は小文字のx(エックス)でOKです。
(6) 地図のタイプを決める
地図タイプは下記の2種類から選択できます。
・roadmap
・mobile
地図タイプを選択しない場合は、上のroadmapがデフォルトで選ばれます。
今回は携帯サイト用なので下のmobileを選択するようにします。
記入例:maptype=mobile
(7) 地図上のマーカーの位置を決める
これは別に決めなくてもよい項目ですが、地図上にマーカーをつけたい場合は設定しましょう。

上の画像の赤いやつがマーカーですね。
ここで決めるべきは大きく3つ。
・緯度経度
・マーカーの色
・マーカーの文字
緯度経度は(3)で説明したみんなの便利帳で調べましょう。
マーカーの色は3種類、「red」「blue」「green」から選択できます。
文字はアルファベットでaからzまで。選ばなければ先ほどの画像のように「・」になります。
記入例:markers=35.666111,139.763689,bluem|35.665204,139.770555,greeny
マーカーを複数設置する場合は、「|」で区切ります。また、マーカー色と文字の間には何もいれません。
「,」や「|」の位置に注意してください。
(8) 地図コード完成
ここまで準備できたら、(2)~(7)までのパラメータをコードとして記述します。
http://maps.google.com/staticmap?
上記のコードの続く形でパラメータを「&」でつなげていきます。
http://maps.google.com/staticmap?
center=35.666111,139.763689
&zoom=17
&size=230x200
&maptype=mobile
&markers=35.666111,139.763689,bluem|35.665204,139.770555,greeny
&key=ABQIAAAAbax_NhWfG*********************************************
上の場合、「&」毎に改行しています。
(9) imgタグの中に、コードを埋め込む
終わりです。
<img src=" ">の" "の中に、(8)で作ったコードを入れ込みHTMLを完成させます。
<img src="http://maps.google.com/staticmap?center=35.666111,139.763689&zoom=17&size=230x200&maptype=mobile&markers=35.666111,139.763689,bluem|35.665204,139.770555,greeny&key=ABQIAAAAbax_NhWfG*******************************************">
あとはズームサイズや地図の中心点等を調整すればOKですね。
上のコードは最初と最後の< >を全角表示にしています。半角に直すと画像になります。
ちなみに、これは静的な画像なので、スクロールや拡大などはできません。
そのへんも必要であれば、ぜひぜひkatyの地図機能を使ってくださいませ。
■ 携帯サイト作成無料 -利用者数No.1 -katy(ケイティ)-
(=゚ω゚)ノ ではでは