2006年02月27日

Google Mapsで渋谷ラーメンマップを作ってみました

てことで、
Google Maps APIを使って、らーめんマップ渋谷編をためしに作ってみました。
こちら
[2008-03-12 23:30:32 追記]
→ドメイン放置してたらramen-diary.netの期限が切れてしまっていました・・。あれからいろいろとまとめたいなと思ってましたので、
別のところに作って入れてみる予定ですー。。


とか言って、正直ブームから半年遅れになってしまってる、とも言いますが、やってみるまでまさかこんなに面白いものだったとは気付きませんでした・・・。
なんか、今までyahooの地図を貼り付けてましたが、こんなことされちゃうと、今までの苦労はなんだったんだろ、と。

作成にあたり、
GoogleMapsEditorと、
KsGMap
を利用させていただきました。
いやはや、これらのツール、本当に素晴らしいです。

・GoogleMapsEditor
こちらはお手軽にGoogleMapの簡易HTMLをさくっと作ってくれます。
正直、アップロードする事ができれば5分もかからないでできちゃうかも。

・KsGMap
こちらはGoogleMapsEditorで作成したのをさらにごにょごにょと機能追加してくれちまうすばらしいライブラリ群です。
GoogleMapsEditorのデフォルトでは物足りない人には是非。

とりあえずらーめん日記とは全く関係ないですが、ものは勢いっちゅうことで以下、作成メモ。
■作成の手順
Googleアカウントの取得だとかは、上記の2ツールのサイトに詳細に解説してくれてますので、自分の使い方として。

▼アップロード先の確保
Seesaaは、基本の文字コードがShiftJISですが、GoogleMapsはUTF-8必須みたいです。
そのままhtmlをファイルアップロードしただけでは文字化けしまくってしまって、
正直使い物にならなかったので、FTPアップなどが可能な外部サーバが必要となりました。
(URLエンコードとかで行けないこともないかもしれませんが、KsGMapまで使いたい場合はアップロードファイルが多いんで、絶対外部サーバがあった方が良いかと)

で、GoogleMapsEditorのみの状態で問題なければ、生成HTMLをアップロードして、リンクを追加して終了。サイドバーや記事内に入れたい場合は、多分IFRAMEなどでもOKっぽ


ここから先はKsGMapでカスタマイズしたい場合。
▼データXMLの作成
実際はcsvを取り込んで、住所から一括で緯度・経度の取得をしたんですが、コレ便利ですなぁ・・。で、出来たデータにゴリゴリ記事IDとかを突っ込んで行きました。
で、XMLがある程度できてから。
GoogleMapsEditorには、「カスタムデザインレイアウトで出力する」という素晴らしい機能があり、この中にKsGMap用のXML出力機能があったので、こちらの形に合わせるためにデータを作成します。
GoogleMapsEditorのテンプレートの中に、
「tmpl_KsGmapデータ出力.html」
というのがあるので、こちらをちょこっと編集。
私はラーメン画像の「width="50%" height="50%」とかだけをちょろっと編集。
で、XMLを作りました。

▼KsGMapファイルのアップロード
マニュアル通りにディレクトリを分けて、素材も引っこ抜いて、まとめてアップ。

▼KsGMapサンプルの編集
とりあえず、「リキッド・デザイン」を選択してみました。
sample_liquiddesign01.htmをコピって、必要なところだけ編集。
xmlのファイル名と、初期カテゴリ、初期経度と、マーカーの種類を増やしたかったので、
KsGMapDataMarker行のみ追加。pngのファイル名も初期から
standard03%count%.png
みたいになってれば楽だったんですが、まぁこのへんはカスタマイズの自由性のためにこうしてあるのかも。

で、XMLとともにhtmlをアップロード。
途中、IEとFireFoxで見え方が全然違ってたりで、
ksgmap102wc.jsの
temp_gmap.offsetHeight
などを書き換えてみたりと見当違い連発。
何故かIEだと画像が横長になってたり、FireFoxだと情報ウィンドウの初回表示のサイズがちっこかったりしました(二回目は正常)が、とりあえず今は無視の方向で(笑)。

他にもいろいろあったんですが、眠いのでこのへんで。
てかこれはマジでAjaxとやらを勉強しなきゃですな。

正直、昨夜からずっといじくってたのでまったく寝てないんですが、、このまま仕事へ行きますか・・・(自業自得


タグ:google map 渋谷
posted by teckl at 10:29 | 東京 ☁ | Comment(3) | TrackBack(0) | edit | BLOG
この記事へのコメント
Operaは対応しないの?w
てか、これはすごいね。
おいらもやってみようかな。
Posted by いため at 2006年02月27日 23:33
マップと同時に、お勧めのラーメン屋ベスト10とかも教えていただけますか?
Posted by ラーメン FAN at 2006年02月28日 00:27
>いためさん
あらーOperaは動かなかったですかな?
うーん今しばらくサポート外と言うことでよろしくw
GoogleMaps、やってみるとおもしろいですよ。

>ラーメン FANさん
毎度どうもです。
ラーメン屋ベスト10ですか〜、そういやそういう観点から見たこと無かったです。
地図集計ついでにちょっと点数とかも集計してみようと思いますので、今しばらくお待ち下さいー。
結構その日の気分で付けてるっていうのもありますので、かなり適当な結果になるだろう事をはじめに言い訳しておきます(笑
Posted by てっくる at 2006年03月01日 01:19
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。