GoogleMapでカテゴリごとのマーカーを表示し、InfowindowのToggleを実装する
stackoverflowでGoogleマップに関するこんな質問の投稿があり
javascript - Toggle Google Maps markers - Stack Overflow
これに対する回答のコードが優れていたため、以下でそのコードをリーディングしたい。
Edit this Fiddle - jsFiddle
locationsという配列にマーカーを表示したい場所を入れる。
各所の情報は
locations[0][0] ロケーション名
locations[0][1] InfoWindow表示する内容
locations[0][2] カテゴリ
locations[0][3] 緯度
locations[0][4] 経度
となっている。
var locations = [ ['Bondi Beach', 'Some text goes here<br />text', 'Walk', -33.890542, 151.274856, 4], ['Coogee Beach', 'Some text goes here<br />text', 'Fish', -33.923036, 151.259052, 5], ['Cronulla Beach', 'Some text goes here<br />text', 'Fish', -34.028249, 151.157507, 3], ['Manly Beach', 'Some text goes here<br />text', 'Walk', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', 'Some text goes here<br />text', 'Walk', -33.950198, 151.259302, 1] ];
次の処理は、
前半が上述のlocationsの各ロケーションをマーカーとしてマップへ表示し、
それらをmarkers配列へ挿入していく処理。
後半は各マーカーをクリックした際にInfowindowを表示する処理となっている。
(すでに表示されているInfowindowは非表示へ切り替える)
マーカーはmarkersと配列で複数管理するが、
InfoWindowはインスタンスをひとつしか作っておらず、
地図上に複数表示されることはない。
for (i = 0; i < locations.length; i++) { // マーカーを表示する処理 marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][3], locations[i][4]), map: map }); markers.push(marker); // マーカーをクリックした際に、InfoWindowを表示する処理 google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent("<p>"+locations[i][0]+"<br />"+locations[i][2]+"<br />"+locations[i][1]+"</p>"); infowindow.open(map, marker); } })(marker, i)); }
後半のInfoWindowを表示する処理について解説。
addListener(marker, 'click', (function(marker, i){/*Infowondowの情報をセット*/})(marker, i));
という構造になっている。ここでmarkerはforループ処理中で追加したマーカーを意味する。
markerとiの2つの引数を取る関数を定義し、forループ内でのmarker、iを渡し実行する
(function(marker,i){})(marker, i );という意味になる。
infowindowは明示的にopenメソッドを利用しなければ地図上に表示されない。
カテゴリごとの表示/非表示
マーカーはsetVisibleメソッドにより、表示を切り替えることができる。
ここで、locations配列の各ロケーションにカテゴリを設定していた。
カテゴリ名を渡すとそれらを表示する関数を定義する。
function show(category) { for (var i=0; i<locations.length; i++) { if (locations[i][2] == category) { markers[i].setVisible(true); } } }