Googleマップのマーカーデータ作成ツールを組んでみた

14年前

Google Mapsにマーカーを複数表示するためには、マーカーを作るに必要な座標やタイトルなんかの情報をまとまったデータにする必要がある訳ですよ。
別ファイルに保存するならXMLとかKMLあたりが主流だと思うんだけど、そのデータを作るのが面倒くさかったのでツールを組んでみた次第。

IEには対応してません。Firefox, Chrome, Safari, Operaで動くと思います。
検索してタイトル記入してSavePoint押すと保存。
保存したマーカーはsessionStorageに蓄積するのでリロードしただけでは消えません。
Download押すと右側にあるセレクトメニューの形式でダウンロード。

Firefox3.6以上の場合はFile APIによりドラッグ＆ドロップでファイルの読み込みができます。
今のところ対応はXMLのみで、出力するXMLと同じ書式であればOK。

<?xml version="1.0" encoding="UTF-8"?>
<marker name="東京" lat="35.681382" lng="139.766084" zoom="15">
<description><!&#91;CDATA&#91;&#93;&#93;></description>
</marker>
<markers>
<marker name="有楽町" lat="35.675069" lng="139.763328" zoom="16">
<description><!&#91;CDATA&#91;&#93;&#93;></description>
</marker>
</markers>

テスト用の山手線駅.xml

sessionStorageで気づいたこと：

文字列しか保存できないけど日本語のキーが使える
ChromeとFirefoxでは並び順が違うらしい（先頭と最後尾のインデックスが逆）
Firefoxだとfor(i in sessionStorage)（所謂each）でエラーになる
オブジェクト保存はencodeURIかJSON.parse

テストはFirefoxとChromeでやってるのだけど、微妙に仕様が違うのが気になる。

ファイルダウンロードはPHPでやっつけてるからiframeにgetしてinjectする。
JavaScriptだけでPHPみたいなファイルダウンロードってまだ出来ないのかなー。

API V3だとXHR&XMLパーサーが内臓されてないから自前で用意しないとXMLデータが読み込めないんだよね。
でもさりげなーくDemo GalleryにXML Parsingというのがあって、util.jsというライブラリが使われていたり。
まあでもサイトでjQueryとかMooToolsとか使ってるなら、そっちのやつ使う方が良いと思う。

シェア