「ホームページに地図を載せたい」――そんなとき、10年前ならIllustratorやPhotoshopを使って一生懸命地図を作ったかもしれません。でも今は違います。Googleマップがあります。
グーグルがGoogleマップのAPIを公開し、外部から利用しやすくしたことで、個人サイトから企業サイトまで、地図は作るのではなく“使う”のが当たり前になりました。同時に、Googleマップを使ったさまざまなオンラインサービスも広がり、Googleマップはすっかり見慣れたものになっています。
カカクコムが運営する「食べログ」もGoogleマップを活用しているサイトのひとつ。飲食店のレビュー情報を共有するCGM(Consumer Generated Media)サイトである食べログでは、Googleマップを使って飲食店の位置情報をユーザーに分かりやすく伝えています。今回は、食べログの手法を参考に、Googleマップを自分のWebサイトに取り入れてみましょう。
![]() |
|---|
今回のお手本サイト:『食べログ』
カカクコムが2005年から運営するグルメサイト。ユーザーが飲食店に対してつけたレビュー情報を共有するCGMサイトとして急成長。現在のレビューの書き込み件数は60万件以上、同種のサイトとしては最大規模となっている。また、最近では「お取り寄せグルメ」のレビュー情報も扱うなど、幅を広げている。
地図の活用で利便性の高い分かりやすいサービスに
たくさんの飲食店が掲載されている「食べログ」には、ユーザーが投稿したレビュー(コメント)のほかに、店名や住所、電話番号、営業時間といった詳細な店舗情報が登録されています。店舗に対する評判を調べるだけでなく、Webサイトを持たない飲食店などでの、基本的な情報を得るためのサイトとしても便利なものです。
![]() |
|---|
| 食べログの個別ページの一例。店舗の詳細な情報と地図がコンパクトに1ページにまとまっています |
さらに店舗情報として、Googleマップを使った小さな地図も掲載されています。別の地図サイトを開く手間なく、1ページで店舗の基本情報からおよその道順までつかめるので、大変便利なものです。このページと同じような仕掛けをさっそく作ってみましょう。
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ+jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第21回 意外性が心地よいJSメニューのWebデザイン
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo!の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド!ページ切換法
- この連載の一覧へ



















![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM] Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif)




