このページの本文へ

Googleマップで探すグルメサイトを作ろう!

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

古籏一浩、ASCII.jp

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

 「確か、あのヘンだったはずなんだけどなぁ……」 かつて訪れたことのあるお店の情報を調べたいけど、正確な名前も住所も分からない。そんなとき、お店の情報がまとめて掲載されている地図があれば便利です。地図ならおおよその場所の記憶から、直感的に目的の情報へたどり着くことができます。たとえば、複数の飲食店の情報を提供する「グルメガイド」のようなサイトであれば重宝されることでしょう。

 ヤフーが運営する「Yahoo!グルメ」も、そんな「地図から探す」機能を持つサイトのひとつ。同サイトに掲載されている飲食店の情報は、地図上ですぐに調べることができます。今回はこの技をお手本にしましょう。

Yahoo!グルメ

今回のお手本サイト:『Yahoo!グルメ』

飲食店のクーポン券のダウンロードから、料理レシピの検索、さらには出前の注文までできる総合グルメサイト。掲載されている飲食店やレシピの情報は「グルメぴあ」「E・レシピ」など、複数の有力コンテンツプロバイダーが提供。情報量が多く、横断検索的な使い方ができる。また、口コミ情報など、CGM系のコンテンツも充実している。

http://gourmet.yahoo.co.jp/


複数のお店の情報を地図上でチェックする

 全国の飲食店の情報が大量に掲載されている「Yahoo!グルメ飲食店情報」では、さまざまな検索方法が用意されています。「最寄り駅」や「住所」といった条件はもちろんのこと、50種類以上の料理ジャンルや予算金額、用途や利用シーンといった条件でも絞込みができ、利便性を高めています。

 その検索方法のひとつに、「地図から探す」というメニューがあります。以下のURLにアクセスしてみましょう。

http://gourmet.yahoo.co.jp/restaurant/map_search.html?st=%C5%EC%B5%FE%C5%D4&sc=3

Yahoo!グルメ
Yahoo!グルメの「地図から探す」。この地図では東京都庁周辺のお店の情報が表示されました
Yahoo!グルメ
さらにマーカーをクリックするとお店の情報が表示されます

 すると、東京都庁の周辺地図が大きく表示されました。地図上には飲食店情報の存在を示すマーカーもあり、クリックすると店舗名や住所などがふきだしで表示されます。個別のページを開くことなく、最小限の情報をその場ですぐに確認できる仕掛けです。もちろん、より詳細な情報が知りたい場合は、店名をクリックすることで個別のページへ移動できます。

 次ページからさっそく、この「地図から探す」機能を作ってみましょう。

Web Professionalトップページバナー

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

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く