マーカーとバルーン

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

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment