まさはる's Weblog

まさはる's Weblog
Macintoshとオーディオの話題

2014年11月30日

Google Maps JavaScript API v3を使って温泉マップを作成

Category : Web 2 / Posted at 2014年11月30日 09:54

 富山県に引っ越してから、道を覚えることを兼ねてあちこちの温泉に行っているのですが、記録しておかないと良かった温泉を忘れてしまうことと若干の紹介を兼ねて温泉マップを作ってみました。

 で、今回はというと、SQLiteで作った温泉のデータベースからPHPでデータを抜き出してJavaScriptに渡し、JavaScriptでGoogle Maps JavaScript API v3を使ってマップを作成しています。

(データベース)
 データベースはSQLiteで十分なのでいつも使っているのですが、うちのレンタルサーバーのSQLiteはver. 2.8なのでSQLite2でも使えるphpLiteAdminを使ってデータ入力をしています。つーか、今までSQLite2で使えるこんな便利なものがあるとは知らんかったわw。
 テーブルの構成については、温泉の施設と泉質を分けて作成しました。と言うのは、1つの施設で複数の泉質の湯がある場合があるためです。ちなみに、温泉でない施設の場合には泉質テーブルにレコードはありません。

phpLiteAdmin
phpLiteAdminで泉質テーブルのレコードを編集

(Google Maps JavaScript API v3)
 2006年にGoogle Mapsを使って作った「フライトシミュレータ用観光マップ」のソースを見ると、http://maps.google.com/maps?file=api&v=2&key=...としているので、これを作った時はv2のようです。ちなみに、v2はGoogleが正式に廃止したので、そのうち使えなくなるかも...。
 v3になってAPIの指定の仕方が変わりましたが、地図を表示する方法等の基本的なところは変わってなさそうなので、サンプルコードを見ながら作りました。

(参考リンク)
PHP
JavaScript
Google Maps JavaScript API v3
SQLite
phpLiteAdmin

このページのトップに戻る