今回はライブラリを使用しません
今回の作例として制作するのは「東京食べ歩きガイド」という架空のグルメサイトです。おいしいお店を紹介するこの個人サイトに、食べログの店舗紹介ページのような地図を組み込みんでみましょう。
これまでこの連載では、既存のAjax/JavaScriptライブラリやjQueryを使った独自のスクリプトでさまざまな処理を実現してきました。今回は、このような既存のライブラリは一切使用しません。使うのはWeb APIのみです。Web APIとはWebサーバーに用意されているサービスで、決められた方法に従って呼び出すことで、さまざまな処理が行なえます。
今回はグーグルが提供するGoogleマップのサービスのひとつである「Static Maps(静的マップ)」を使います。Static Mapは一般的なGoogleマップとは異なり、Ajaxが使われていません。ドラッグしたり拡大するような機能はなく、単純に指定された範囲の地図を画像として表示するだけです。その代わり、Ajaxが動かない携帯電話やゲーム機のWebブラウザーでも、問題なくGoogleマップを表示できるというメリットがあります。
●Google Maps APIのキーを取得する
Static Mapsを使用するには、事前にGoogleマップのAPIキーを取得しておく必要があります。すでにGoogleマップのAPIキーを取得している人は、次のステップに進んでください。
APIキーを取得するには、最初に以下のページにアクセスします。
http://code.google.com/intl/ja/apis/maps/signup.html
ページの下にある「利用規約を読んだ上でこれに同意します」のチェックボックスにチェックを入れます。次に、「利用者のウェブサイトの URL:」にStatic Mapsを使用するページのURL/ドメイン(またはフォルダまでのパス)を入力して、「APIキーの生成」ボタンをクリックしましょう。
すると次のページで、APIキーが生成されます。
一番上に表示されるのがAPIキーです。これをコピー&ペーストして使用します。なお、このAPIキーは今回だけでなく、次回のサイト制作でも使用しますので控えておくとよいでしょう。ちなみに、APIキーの生成は何度でもやり直しが可能です。地図が表示できない場合や間違ってURLを入力してしまった場合は、最初に戻ってやり直しましょう。