このページの本文へ

Googleマップ初歩の初歩!静的地図を組み込もう (2/5)

2009年02月10日 08時00分更新

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

今回はライブラリを使用しません

 今回の作例として制作するのは「東京食べ歩きガイド」という架空のグルメサイトです。おいしいお店を紹介するこの個人サイトに、食べログの店舗紹介ページのような地図を組み込みんでみましょう。

作例

「東京食べ歩きガイド」。今回はこのページに地図を組み込みます


 これまでこの連載では、既存の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

Google Maps

APIキー取得ページ


 ページの下にある「利用規約を読んだ上でこれに同意します」のチェックボックスにチェックを入れます。次に、「利用者のウェブサイトの URL:」にStatic Mapsを使用するページのURL/ドメイン(またはフォルダまでのパス)を入力して、「APIキーの生成」ボタンをクリックしましょう。

Google Maps

使用するサイトのURLを入力します


 すると次のページで、APIキーが生成されます。

Google Maps

APIキーが生成されました

Google Maps

一番上がAPIキーです


 一番上に表示されるのがAPIキーです。これをコピー&ペーストして使用します。なお、このAPIキーは今回だけでなく、次回のサイト制作でも使用しますので控えておくとよいでしょう。ちなみに、APIキーの生成は何度でもやり直しが可能です。地図が表示できない場合や間違ってURLを入力してしまった場合は、最初に戻ってやり直しましょう。

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています