event

Posted by muchag | Google Maps JavaScript API V3 |
初回投稿:2011-07-22 (金) 22:21:39 | 最終更新:2011-07-22 (金) 22:21:39

Google マップに対してユーザがことを起こすと
event オブジェクトが生成される。

Google Code:Google Maps JavaScript API V3 のイベント

種類
  • 状態変化イベント
  • ユーザイベント

API クラス毎に様々なイベントが用意されている。

Google Code:Google Maps JavaScript API V3 リファレンス
 

受け取り

addListener(instance:Object, eventName:string, handler:Function)

Google Code:Google Maps JavaScript API V3 リファレンス MapsEventListener オブジェクトの仕様

第1引数:イベントを受け取るオブジェクト
第2引数:イベント名称
第3引数:イベント処理メソッド
 

  1. /* Map オブジェクトの zoom 値が変更されるイベント */
  2. google.maps.event.addListener(map, 'zoom_changed', function() {
  3.     setTimeout(moveToDarwin, 3000);
  4. });
  5.  
  6. /* Marker オブジェクトが click されるイベント */
  7. google.maps.event.addListener(marker, 'click', function() {
  8.     map.setZoom(8);
  9. });

 

プロパティ
latLng

イベントが発生した位置のカーソルの緯度/経度。

  1. /* Map オブジェクトの zoom 値が変更されるイベント */
  2. google.maps.event.addListener(map, 'click', function(event) {
  3.     var latlng = event.latLng; /* ← クリックされた場所の緯度・経度 */
  4. });
  5.  
  6. /* Marker オブジェクトが click されるイベント */
  7. google.maps.event.addListener(marker, 'click', function(event) {
  8.     var latlng = event.latLng; /* ← クリックされたマーカーの緯度・経度 */
  9. });

 
他にも event オブジェクトのプロパティはあるらしいのだが
ブラウザ依存だそうで、ブラウザによって異なる。

そのため使い辛いようだ。

よって、上述の latLng プロパティですら

  1. var latlng = event.latLng;
  2.  
  3. とはせずに
  4.  
  5. var latlng = this.getPosition();

という記述を奨める記事があった。
おやじプログラマー日記:「GoogleMap API V3」 の使い方その4(イベント)

Posted by muchag | Google Maps JavaScript API V3 |
初回投稿:2011-07-22 (金) 22:21:39 | 最終更新:2011-07-22 (金) 22:21:39

マーカーとバルーン

Posted by muchag | Google Maps JavaScript API V3 |
初回投稿:2011-07-22 (金) 10:36:41 | 最終更新:2016-05-01 (日) 15:10:03

クロージャ・・・何となく使えるようになった思っていたのは
気のせいだったらしい。

何度もやり直した。
まだまだまだまだだ。

新しい記事

infoWindow 複数配置
けど、こっちが不要かどうかは未精査。

1個設置
  1. function initialize() {
  2.  
  3.     /* マップ */
  4.     var myOptions = {
  5.         zoom: 5,
  6.         center: new google.maps.LatLng(35, 139), // 適当
  7.         mapTypeId: google.maps.MapTypeId.ROADMAP
  8.     }
  9.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  10.  
  11.     /* マーカー */
  12.     var marker = new google.maps.Marker({
  13.         position: new google.maps.LatLng(35.362873, 138.731567),
  14.         map: map,
  15.     });
  16.  
  17.     /* バルーン */
  18.     var infowindow = new google.maps.InfoWindow({
  19.         content: "富士山"
  20.     });
  21.     infowindow.open(marker.getMap(), marker);
  22. }

 

 

クリックイベント

上の例だと最初からバルーンが表示されているので
マーカーをクリックしたらバルーンが表示されるタイプに改変。
 

  1. function initialize() {
  2.  
  3.     /* マップ */
  4.     var myOptions = {
  5.         zoom: 5,
  6.         center: new google.maps.LatLng(35, 139), // 適当
  7.         mapTypeId: google.maps.MapTypeId.ROADMAP
  8.     }
  9.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  10.  
  11.     /* マーカー */
  12.     var marker = new google.maps.Marker({
  13.         position: new google.maps.LatLng(35.362873, 138.731567),
  14.         map: map,
  15.     });
  16.  
  17.     /* バルーン */
  18. -   var infowindow = new google.maps.InfoWindow({
  19. -       content: "富士山"
  20. -   });
  21. -   infowindow.open(marker.getMap(), marker);
  22.  
  23. +   google.maps.event.addListener(marker, 'click', function(event) {
  24. +       var infowindow = new google.maps.InfoWindow({
  25. +           content: "富士山"
  26. +       });
  27. +       infowindow.open(marker.getMap(), marker);
  28. +   });
  29. }

 

複数設置

問題はここから。

マーカーを複数設置するのは問題なし。

でも、そのマーカーのクリックイベントリスナーを
前述の例の如く設定すると、どこをクリックしても
最後のマーカーが反応してしまう。

そこでイベントリスナーは関数にして
外へ出す。
 

  1. function initialize()
  2. {
  3.     /* マップ */
  4.     var myOptions = {
  5.         zoom: 5,
  6.         center: new google.maps.LatLng(35, 139), // 適当
  7.         mapTypeId: google.maps.MapTypeId.ROADMAP
  8.     }
  9.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  10.  
  11.     var data = new Array();
  12.     data.push({lat: 35.362873, lng: 138.731567, content: "富士山"});
  13.     data.push({lat: 34.295929, lng: 132.319870, content: "厳島神社"});
  14.     data.push({lat: 43.366375, lng: 142.340302, content: "ラベンダーの森"});
  15.  
  16.     for (var i = 0; i < data.length; i++) {
  17.  
  18.         /* マーカー */
  19.         var marker = new google.maps.Marker({
  20.             position: new google.maps.LatLng(data[i].lat, data[i].lng),
  21.             map: map,
  22.         });
  23.  
  24.         /* バルーン */
  25.         var htmlContent = "<dl><dt>" + data[i].content + "</dt><dd></dd></dl>";
  26.         attachMarkerClickEvent(marker, htmlContent);
  27.     }
  28. }
  29.  
  30. function attachMarkerClickEvent(marker, htmlContent)
  31. {
  32.     google.maps.event.addListener(marker, 'click', function(event) {
  33.  
  34.         var infowindow = new google.maps.InfoWindow({
  35.             content: htmlContent
  36.         });
  37.         infowindow.open(marker.getMap(), marker);
  38.     });
  39. }


これで無事に複数のマーカーとそれぞれのバルーンを設置できた。
 

バルーンの制御

しかし、このままだとバルーンが同時にいくつも表示されるし
1つのマーカーでもクリックするたびに同じ位置に新たにバルーンが表示されてしまうので
その辺を改良。
 

  1. +var currentInfoWindow = null;   /* 現在開いているバルーン格納変数 */
  2.  
  3. function initialize()
  4. {
  5.     /* マップ */
  6.     var myOptions = {
  7.         zoom: 5,
  8.         center: new google.maps.LatLng(35, 139), // 適当
  9.         mapTypeId: google.maps.MapTypeId.ROADMAP
  10.     }
  11.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  12.  
  13.     var data = new Array();
  14.     data.push({lat: 35.362873, lng: 138.731567, content: "富士山"});
  15.     data.push({lat: 34.295929, lng: 132.319870, content: "厳島神社"});
  16.     data.push({lat: 43.366375, lng: 142.340302, content: "ラベンダーの森"});
  17.  
  18.     for (var i = 0; i < data.length; i++) {
  19.  
  20.         /* マーカー */
  21.         var marker = new google.maps.Marker({
  22.             position: new google.maps.LatLng(data[i].lat, data[i].lng),
  23.             map: map,
  24.         });
  25.  
  26.         /* バルーン */
  27.         var htmlContent = "<dl><dt>" + data[i].content + "</dt><dd></dd></dl>";
  28.         attachMarkerClickEvent(marker, htmlContent);
  29.     }
  30. }
  31.  
  32. function attachMarkerClickEvent(marker, htmlContent) {
  33.     google.maps.event.addListener(marker, 'click', function(event) {
  34.  
  35. +       if (currentInfoWindow) currentInfoWindow.close();
  36.  
  37.         var infowindow = new google.maps.InfoWindow({
  38.             content: htmlContent
  39.         });
  40.         infowindow.open(marker.getMap(), marker);
  41.  
  42. +       currentInfoWindow = infowindow;
  43.     });
  44. }

 

1行目

1行目で、現在開いているバルーンを格納する変数を定義。
 

35行目

35行目で、現在開いているバルーンがあれば
まず閉じる。
 

42行目

42行目で新たに開いたバルーンを変数へ格納。
 

参考元サイト

なんちゃって☆めも:複数のgoogle.maps.Markerに吹き出しをつける
Google Maps 活用講座:Maps API v3でv2のように、1つだけの情報ウィンドウが開くようにする(1)

Posted by muchag | Google Maps JavaScript API V3 |
初回投稿:2011-07-22 (金) 10:36:41 | 最終更新:2016-05-01 (日) 15:10:03

Fusion Tables -> マイマップからの移行 CSV 編

Posted by muchag | Excel VBA,Fution Tabels |
初回投稿:2011-07-17 (日) 22:35:23 | 最終更新:2013-04-20 (土) 3:47:03

Fusion Tables -> マイマップからの移行 KML 編

CSV

テキストファイル。

前回の記事で書いた Google マップの KML ファイルを
CSV 形式に変換して Excel で編集して
Fusion Tables に取り込むことができる。
 

KML の問題点

前回の記事に書いたけど
KML ファイルでマイマップの情報を Fusion Tables に移行させると
今まで付けてきたマーカーが、1種類に変換されてしまう。

そこで、KML ファイルからマーカーの情報を取り出して
ちゃんとテーブルから反映させるために
CSV 形式にて移行することにした。
 

変換作業

KML ファイルは XML 形式なので
CSV 形式にするには一手間必要。

そこで、その手間を Excel に担当してもらうことにした。
 

KML ファイルの取得

マイマップの KML ファイルの取得方法は
Fusion Tables -> マイマップからの移行 KML 編
参照。
 

CSV に変換

自作 Excel VBA マクロを用いる。
KML2CSV_0.0.2.xls

以前、WordPress プラグイン QuickTags 用の マクロ を公開したが
今回も、いつも情報やらライブラリやらをいただいてばかりの私のちっさな恩返しとして、
こんな私の稚拙なマクロでも役に立つ奇跡を祈りつつ公開してみる。
 

利用上の注意
  • このマクロを利用して何か問題・損害が発生しても私は一切関知しません
  • 必ず「自己責任」でどうぞ
  • 私が必要とする狭い利用例を元に製作してあるので、機能が足りないとか誤変換とかの可能性は大
  • Fusion Tables は、現在 Beta 版なので仕様変更の可能性は大。そうしたら使えなくなる可能性は極大

KML2CSV_0.0.2.zip (40,600byte)

Windows XP Pro SP3 & Excel 2003 VAB にて作成および動作確認。
Google Fusion Tables (Beta) にて動作確認。
2011-07-17 現在。
文字コードは UTF-8 。

【更新履歴】
v 0.0.2 2011-07-17
バグフィクス。

v 0.0.1 2011-07-17
新規作成。

 

完全自動変換


 

1.「KML => CSV 自動変換」ボタンをクリック(上図参照)

 

2..kml ファイルを選択する

 

3._auto.csv ファイルが .kml ファイルと同じディレクトリに保存される

 

テーブル手動編集

1.「KML ファイル読み込み」ボタンをクリック(上図参照)
CSV シートの初期化

CSV シートに残っている
前回の作業結果をクリアする。

もちろん初めて利用される方にはもんだいありませんが、
綺麗サッパリなくなるので、
2回目以降の方で不安な場合は、シートをコピーしておいてください。

 

マイマップから DL した .kml ファイルを指定

 

CSV シートに読み込まれる


これを読み込むとこうなる。

タグの除去

description カラムについて
独断と偏見により不要と思われるタグ系文字列を除去してあります。

あくまでも私の環境で不要と感じただけなので
もし、必要だと感じられる方がおられたらすみません・・・。
 

2.「CSV」シートを自身で編集
1行目はフィールド(カラム)名

マイマップから取得した .kml ファイルの項目を
私が勝手にカスタマイズして上図のように次のようなカラム名を付けてある。

  1. name タイトル部
  2. icon マーカー名称
  3. geometry ポイントの緯度・経度
  4. description 詳細テキストエリア内のテキスト

第4カラムの description のみ改行に合わせて
次々とセル分割して入れてある。

これを用途に合わせて変更する。

左図例では
description の代わりに
zip, phone, content
としている。

 
この例では、データが少ないのですんなりいくが
多い場合はカラムとデータがズレズレになるので
面倒でも編集する・・・orz
 

セル内改行

今回の例に合わせると
歌詞は1つのセルにまとめたい。
でも、表示するときは改行を入れたい。

そういうときは、Alt + Enter でセル内改行を利用する。

こうしておけば、本番でも1つの項目内で改行される。

 

3.「CSV ファイル保存」ボタンをクリック(上図参照)

KML ファイルと同じディレクトリに
ファイル名_manual.csv
という名前で保存される。

前述の例を変換するとこうなる。

  1. "name","icon","geometry","zip","phone","content"
  2. "富士山","volcano","<Point><coordinates>138.731567,35.362873,0.000000</coordinates></Point>","123-4567","0120-xxxx-xxxx","頭を雲の上に出し<br />四方の山を見下ろして<br />雷様を下に聞く<br />富士は日本一の山"
  3. "厳島神社","picnic","<Point><coordinates>132.319870,34.295929,0.000000</coordinates></Point>","","",""
  4. "ラベンダーの森","tree","<Point><coordinates>142.340302,43.366375,0.000000</coordinates></Point>","","",""

 
タグが入っている場合
属性値を囲む (ダブルクォーテーション)は
Fusion Tables 読み込み用に二重に書き換えられる。
 

アップロード

Google Fusion Tabels にアクセスして
左ペインの [New tables]-[Import table]

 
ブラウザによってちょっと表示が変わるが
(左図は Google Chrome)
ファイル選択ボタンから

 
先ほど作成した
ファイル名_manual.csv
を選択する。

 
今回作成した CSV ファイルは
カンマ区切り
UTF-8
なので、変更の必要なし。

「Next」

 
「Next」

 
「Next」

 
インポート成功!

 

マップ表示

マップを見るには
[Visualize]-[Map]

 
[Configure styles]

 
① Column タブをクリック

② Use icon specified in a column をチェック

③ ドロップダウンから icon を選択

④ save をクリック

 
元通りのアイコンでマイマップが表示された♪

Posted by muchag | Excel VBA,Fution Tabels |
初回投稿:2011-07-17 (日) 22:35:23 | 最終更新:2013-04-20 (土) 3:47:03

Fusion Tables -> マイマップからの移行 KML 編

Posted by muchag | Fution Tabels |
初回投稿:2011-07-17 (日) 19:58:25 | 最終更新:2011-08-07 (日) 11:06:25
マイマップ

とっても便利な マイマップ

Google のサービスで
ただでさえ便利な Google マップ を自分専用にカスタマイズできる
っていうので、初めて触ったときには大いに感動したなぁ。
 

サービス内容の変更

でも、Google はこのサービスの提示手法を変更しようとしているようで
現在は「マイマップ」は「マイプレイス」に組み込まれた。
 

マイマップの難点

ところで、システム好きの私が
マイマップで唯一困っていたのが
書く度に書式がバラバラになること。

ポイントの説明がテキストエリアだったのが原因。
 

Fusion Tables への移行

この問題が Fusion Tables と連携させることで解消できることがわかったのと
Android からマイマップを利用するには
どうやら Fusion Tables を介さないとだめらしいので
Fusion Tables に移行してみることにした。
 

KML

移行手法は色々とあるみたいだけど
今回は KML 編。

KML というのは、地図上の情報を
XML 形式で文字列に表したもの。
Google Code:KML リファレンス
 

具体的な移行作業
KML ファイルの取得

Google マップ にアクセスして
「マイプレイス」をクリック。

 
一覧から当該マップをクリック。

 
当該マップが開いたら「KML」をクリック。

 
そうすると当該マップの KML ファイル(今回は test.kml )を DL できる。

 

Fusion Tables へインポート

Google Fusion Tabels にアクセスして
左ペインの [New tables]-[Import table]

 
ブラウザによってちょっと表示が変わるが
(左図は Google Chrome)
ファイル選択ボタンから

 
当該ファイルを選択する。

今回の例では test.kml 。

 
元の画面に戻るので
当該ファイルが選択されたことを確認して
「Next」

 
基本的には何せずに「Next」

 
はい!
無事に Fusion Tables にテーブルが読み込まれ完了。

 

マップ表示

マップを見るには
[Visualize]-[Map]

 
マップ表示当初は
Data may still be loading.
Drag or refresh the page to find out.
となっているので、何かする・・・。

 
試しにホイールで1段階引き画面にした結果が左図。

マイマップでポイントしていた3箇所にマーカーがちゃんと付いているのがわかる。

 

問題点

細かいことは抜きにしてポイントマーカーがデフォルトの赤丸に統一されている。
あんなに色々とマーカーしてたのにぃぃぃぃ。

現在の Fusion Tables は Beta 版なので仕方ないのかも。
本サービスでは、上手く移行できることに期待。

なんて、ノンビリしたことはやめて
他の手法を試してみる。
Fusion Tables -> マイマップからの移行 CSV 編
 

中身

ちなみに KML ファイルの中身は・・・。
 
例えば左図のようなマイマップがあるとする。

 
上例マイマップの KML ファイルは以下のようになる。

test.kml
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <kml xmlns="http://earth.google.com/kml/2.2">
  3. <Document>
  4.   <name>test</name>
  5.   <description><![CDATA[]]></description>
  6.   <Style id="style1">
  7.     <IconStyle>
  8.       <Icon>
  9.         <href>http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/volcano.png</href>
  10.       </Icon>
  11.     </IconStyle>
  12.   </Style>
  13.   <Style id="style3">
  14.     <IconStyle>
  15.       <Icon>
  16.         <href>http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/picnic.png</href>
  17.       </Icon>
  18.     </IconStyle>
  19.   </Style>
  20.   <Style id="style2">
  21.     <IconStyle>
  22.       <Icon>
  23.         <href>http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/tree.png</href>
  24.       </Icon>
  25.     </IconStyle>
  26.   </Style>
  27.   <Placemark>
  28.     <name>富士山</name>
  29.     <description><![CDATA[<div dir="ltr">123-4567<br>0120-xxxx-xxxx<br>頭を雲の上に出し<br>四方の山を見下ろして<br>雷様を下に聞く<br>富士は日本一の山</div>]]></description>
  30.     <styleUrl>#style1</styleUrl>
  31.     <Point>
  32.       <coordinates>138.731567,35.362873,0.000000</coordinates>
  33.     </Point>
  34.   </Placemark>
  35.   <Placemark>
  36.     <name>厳島神社</name>
  37.     <description><![CDATA[]]></description>
  38.     <styleUrl>#style3</styleUrl>
  39.     <Point>
  40.       <coordinates>132.319870,34.295929,0.000000</coordinates>
  41.     </Point>
  42.   </Placemark>
  43.   <Placemark>
  44.     <name>ラベンダーの森</name>
  45.     <description><![CDATA[]]></description>
  46.     <styleUrl>#style2</styleUrl>
  47.     <Point>
  48.       <coordinates>142.340302,43.366375,0.000000</coordinates>
  49.     </Point>
  50.   </Placemark>
  51. </Document>
  52. </kml>
Posted by muchag | Fution Tabels |
初回投稿:2011-07-17 (日) 19:58:25 | 最終更新:2011-08-07 (日) 11:06:25

Fusion Tables

Posted by muchag | Fution Tabels |
初回投稿:2011-07-17 (日) 19:00:26 | 最終更新:2011-08-07 (日) 11:07:16

Google が提供しているサービスの1つ。

無料のデータベースだと思えばいいのかしら。

まだほとんど使っていないので詳細は不明だけど
データテーブルを作っておけば
そこからチャートにできたりなんだりするみたい。

Google Fusion Tabels
2011-07-17 現在、Beta 版。

当然ながらアカウント依存。
 

Top
All items

当該アカウントに登録されている全てのテーブル。

 

Owned by me
Shared with me

共に字面から想像はつくけど、試してないのでまた今度。
 

Trash

これもまんま。
ゴミ箱。

Windows と同じで、テーブルを普通に削除した場合は
この「Trash」に移される。

よって、完全の削除するためには
Trash 画面で再度削除すること。
 

Public tables

公開設定されいる他人のテーブル一覧。

この前の大震災のとき「避難所一覧」とか「計画停電」とか
あちこちで情報が出ていて、どこから情報を引っ張っているのかと思っていたけど
なるほど、こういうところから引っ張った人もいるのね~。

 

マップ連携

Fusion Tables -> マイマップからの移行 KML 編
Fusion Tables -> マイマップからの移行 CSV 編

Posted by muchag | Fution Tabels |
初回投稿:2011-07-17 (日) 19:00:26 | 最終更新:2011-08-07 (日) 11:07:16
« 前ページへ