隠居のパソコン備忘録： Google Maps API JS V3 で、カテゴリー別に色違いマーカーを表示する
酷暑で屋外での活動は歳を考えて自粛していた。それで、自然とパソコンに向かう時間が多くなっていた。取り組んだのは、V3 にバージョンアップした Google Maps JS API で旅行地図などを作成するなどのいろいろなトライである。
といっても、一から Google Maps JS API で希望する地図を作成する能力はないから、公開されている人様のコードをいじることが主体である。このようなときに、重宝させていただいているのは、Using the Google Maps API v3にあるサンプルである。
Mike Williams' tutorial というサイトで V2 でサンプル表示されていた More advanced stuff - Part 25 Marker Categoriesを、V3 コードに置き換えた translated to v3というのが紹介されている。これを利用すれば、野鳥撮影地点を種別に表示するときなどに使えそうと思い自分のできる範囲でいじって見ることにした。
このような作業をする時の手順は、だいたい次のようにしており、備忘録として記録しておきたい。
- サンプル画面のソース・コード（IE の場合、メニューバーの表示⇒ソース）を取得する。これを、テキスト編集ソフト（私の場合：秀丸）にコピペし、名前をつけて、適当なフォルダーに、html ファイルとして保存する。
- サンプルコードで使用されている Javascript ユティリティ ファイル（今回の例では、downloadxml.js ファイル）や使用するマーカイメージ・ファイル（今回のサンプルでは、marker_red.png のようなファイル）を用意し、ファイル転送ソフト（私の場合：FFFTP )でサーバー（私の場合：Xserver ）上の適当なフォルダーにアップロードしておく。
- サンプル・コードで使用されている xml ファイル（普通はサンプル・コード内で相対パスで表示されている。これを絶対パスにして、ブラウザで表示させる）をC&P して、秀丸の新しいファイルとする。適当な名前（xmlファイルで）で保存する。これも、先ほどと同じサーバー上の同じフォルダーにアップロードしておく。
- 秀丸画面で、自分の環境に合うように、サンプルコードのそれらのファイルの path を書き換える。私の場合、ミスがないように、絶対パスで書くことにしている。
- 自分のサーバー環境に合わせたサンプル・コードをブラウザで表示してみる。これで、參照サンプルと同じように表示されたら、サンプルのコピーは成功である。
- このサンプルコードを少しづついじって、目的とする地図（今回、地元の公園・ホームセンター・大型電気店を種別（ caｔegory ）に表示することを目指した。）に近づけていく。先ず、地図の中心を地元にするために、地図の center 緯度・経度を置き換えた。
- と同時に、xml ファイルも、サンプルで使われているファイルを真似して、新たに日本語を含むファイルを作って（XML ファイルの編集は、XmlNotepad を使っている）サーバー上にアップロードした。（日本語のエンコードは、UTF-8 ）
- その他、caｔegory の名前を変えたことに対応する修正などを加えて保存、サーバーにアップロードして、ブラウザで表示してみた。地図やチェックボックス、日本語のサイドバーは、期待通り表示されたが、肝心のマーカーが表示されない。元のサンプルコードと見比べながら、チェックしてみたが、原因が分からない。
ＪａｖａＳｃｒｉｐｔや HTML のコードは、カンマ一つ抜けても動かないことがあるので、再度やり直すなど作業を続けて見たが、うまくいかない。 - 3日間ほど悩んで、諦めかけていたが、原因はどうやら XML ファイルにあるらしいと思われたので、再度フィルを眺めていると、ing（longitude：経度） と lat（latitude：緯度）の数字が入れ替わっていることに気がついた。今まで、このような XML ファイルは lat ⇒ lng という順序で記入していたのに、今回使ったサンプル XML ファイルは順序が逆になっていたのだ。サンプル XML ファイルの経度・緯度が海外の地点を示していたので、気づくのが遅れたらしい。
数字を入れ替えてみると期待通りに表示されるようになった。ミスというのは大体において、このようにうっかりミスが多いものだが、ついつい難しく考えてしまいがちだ。 - このサンプルコードを土台に、マーカーの吹きだし(infowindow) に画像やリンクURL を表示を試みたが、それらも OK のようである。
なお、写真の表示が、画面の中心に表示され背景がフェードアウトする lightbox も使えるので、今後いろいろな応用ができるのではないかと考えている。
作成例：泉北ニュータウンの公園・ホームセンター・大型電気店地図 サンプル・ページ
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)