最強の地図API「Google Maps JavaScript API v3」を使って外国人用のレストランガイド作りました
スポンサーリンク
皆さんこんにちは。
今週末時間があったので今日は地球上でもっとも使いやすい地図APIであるGoogle Maps JavaScript API v3 を使ってどこまで出来るか調べてみるついでにレストラン情報サイトを作ってみました。
コンセプトは全く右も左も分からない外国人がサイトを見て食べたい種類のレストランに何とかたどり着けるようにすることです。
スクリーンショットはこちら。
カテゴリごとにアイコンをつけ、銀座周辺にいたらその場所が表示され（今のところあんまり正確じゃないです）いなければ和光から始まります。
タブによってイタリアンやラーメン屋などを絞って検索することが出来ます。
まず最初に緯度経度、カテゴリーが分かるレストラン情報をぐるなびさんかロケタッチさんからいただきます。
今回はロケタッチさんから頂きました。
http://api.gourmet.livedoor.com/v1.0/restaurant/?api_key=API_KEY&area_id=1&page=??
のような形で適当にphpとかでページ番号をエラー吐くまで繰り返して足していき、データベースにレストラン情報を入れていきます。
私の今回のDB設計は
+---------------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+---------------+--------------+------+-----+---------+----------------+
| id | int(11) | NO | PRI | NULL | auto_increment |
| name | varchar(128) | NO | | NULL | |
| address_j | varchar(255) | YES | | NULL | |
| address_e | varchar(255) | YES | | NULL | |
| address_c | varchar(255) | YES | | NULL | |
| address_t | varchar(255) | YES | | NULL | |
| zip | varchar(11) | YES | | NULL | |
| category1 | varchar(255) | YES | | NULL | |
| category2 | varchar(255) | YES | | NULL | |
| category3 | varchar(255) | YES | | NULL | |
| tel | varchar(30) | YES | | NULL | |
| url | varchar(255) | YES | | NULL | |
| url2 | varchar(255) | YES | | NULL | |
| closeday | varchar(255) | YES | | NULL | |
| closeday_note | varchar(255) | YES | | NULL | |
| weekday | varchar(255) | YES | | NULL | |
| lunch | varchar(255) | YES | | NULL | |
| dinner | varchar(255) | YES | | NULL | |
| name_e | varchar(255) | YES | | NULL | |
| lat | varchar(20) | YES | | NULL | |
| lng | varchar(20) | YES | | NULL | |
| rate | varchar(20) | YES | | NULL | |
+---------------+--------------+------+-----+---------+----------------+
こんな感じにしました。思いつくままに作ったので非常に雑なDBです。使わなかったやつとかいっぱいあります。^^;
大事なのは 名前、住所、緯度、経度、カテゴリ情報、開店時間、休業日、ランチの値段、ディナーの値段、電話番号くらいでしょうか？
大体２４００件くらいの銀座周辺のレストラン情報を頂いたのでいよいよgooglemap APIを使ってみます。
重要なのはいかにして質のよいサンプルコードに行き当たるかです。幸いにしてGoogleが質のよいコードを公開しているので使わせてもらいます。
Code Samples - Google Maps JavaScript API v3 — Google Developers
上記サイトにやりたいこととサンプルコードが入っていますので一番上のsimple mapをクリックしてコードを見て見ます。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
実にこれだけでマップが表示できることになりました。
これを元手にデータベースの緯度経度情報からマーカーに落とし込んで見ます。
マーカーのへの情報はこの方が分かりやすいサンプルコードを書いてくれております。
マーカーの作成 - マーカー - Google Maps API入門
var m_latlng1 = new google.maps.LatLng(35.632605,139.88132);
var marker1 = new google.maps.Marker({
position: m_latlng1,
map: map
});
こんな感じで緯度経度を指定します。今回のマーカーは２０００を越えるため配列にして処理します。
次にそんなに正確には測れないのですがgeoLocationというhtml5の新機能で非常に簡単にGPSみたいなことが出来るのでを使ってみます。
銀座周辺にいれば該当する場所からの表示を行います。
//geolocationinit
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
//銀座以外はデフォルト
if(position.coords.latitude>35.672135&&position.coords.latitude<35.674617){
if(position.coords.longitude>139.757802&&position.coords.longitude<139.777705){
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
});map.setCenter(pos);
}
}
}, function() {
handleNoGeolocation(true);
});
}
コードは実にこれだけ。
銀座以外はデフォルトの和光からにしたいので銀座の緯度35.672135～35.674617、経度139.757802～139.777705を判定してもらいます。
さて、続いてresponse.phpとかを作成し、mysqlの情報をphpで取り出したあとは、下記コードでjsonにエンコードし、javascriptに投げてあげます。
response.php
header('Content-type: application/json');
echo json_encode($spot);
受ける側のindex.htmlではjQueryのajaxを使って非同期で読み込みを行います。
jQueryとjquery.jsonというプラグインを使用します。
jquery.json-2.4.js - jquery-json - Full source of the plugin - jQuery JSON - Google Project Hosting
php側ではjson以外の情報を一切出さないようにしないとajaxが受け取るときにはてな？っとなってしまいます。
この方のJSONの処理が参考になりました。ありがとうございます^^
jQuery & Ajax通信を使ってPHPにPOSTでデータを送信するサンプル – WebCake
ここで成功したらデータのカテゴリによってアイコンを変える処理をします。
面倒くさいのでべた打ちします。
//iconsetting
var Icon_beer = new google.maps.MarkerImage("icon/beer.png");
Icon_beer.size = new google.maps.Size(35, 35);
Icon_beer.anchor = new google.maps.Point(0, 35);
var Icon_china = new google.maps.MarkerImage("icon/china.png");
Icon_china.size = new google.maps.Size(35, 35);
Icon_china.anchor = new google.maps.Point(0, 35);
var Icon_coffee = new google.maps.MarkerImage("icon/coffee.png");
Icon_coffee.size = new google.maps.Size(35, 35);
Icon_coffee.anchor = new google.maps.Point(0, 35);・
・
・
/**
* Ajax通信が成功した場合に呼び出されるメソッド
*/
success: function(data,dataType)
{
//結果が0件の場合
if(data == null) alert('データが0件でした');
dataglobal=data.length;
//返ってきたデータの表示
content = $('#content');
var markers = new Array();for (var i =0; i<data.length; i++)
{
var m_latlng = new google.maps.LatLng(data[i].lat,data[i].lng);
if(data[i].category1=="バー" || data[i].category1=="ビアホール
・ビアガーデン" ||data[i].category1=="居酒屋"||data[i].category1=="和食その他"){
markers[i] = new google.maps.Marker({
position: m_latlng,
icon: Icon_beer,
map: map
});
}else if(data[i].category1=="北京料理" || data[i].category1=="台湾料理" ||data[i].category1=="中華料理その他"){
markers[i] = new google.maps.Marker({
position: m_latlng,
icon: Icon_china,
map: map
});以下同文
最後にプルダウンメニューから変更があった場合、カテゴリを読み直してphpに渡してあげます。
ここの処理も上記参考サイトを見ていただくとよいかと思います。
jQuery & Ajax通信を使ってPHPにPOSTでデータを送信するサンプル – WebCake
これで大体の処理が終わりましたので後はデザインをちょっと整えて完成です。
今回は大きく分けて
- apiを使ったデータベースへの入力処理 (php)
- データベースを使ったサーバサイドプログラム。jsonで出力処理 (php)
- サイトに表示するjavascriptを含んだhtml (html+javascript)
の３つのファイルを作りました。
実際動かして外国の皆様に信頼に足る情報を使ってもらえるには食べログさんの情報がほしいですね。
また暇を見て改良してみます。
ではまた。 ＾＾
追記:夜調べたらぐるなびさんが英語版の店情報を出しており実装したらぐるなびに加入出来るトラディショナルなお店が残りかなり良い感じになりました。止まらなくてつい徹夜仕事になってしまったorz
追記２：２０１５年１１月iPhoneアプリにしました。
