GoogleMap クリックでmarkerを変更したい。

Question

プログラム初心者です。よろしくお願いします

webサイト上の「公園」、「公衆電話」、「観光地」、「郵便ポスト」ボタンを押すと
対応するマーカーが地図上に表示される仕組みを作りたいと思っています。

具体的には、
google.maps.Marker　の　visibleをデフォルトでfalseにして、
クリックしたら各項目のvisibleをtrueにすれば実現できるのではと思ったのですが、
変数　visible を　クリックイベントで変更できずに困っています。

また、違う方法でもっと効率のよい方法があればご教授ください。

 <div id="map"><!-- マップ挿入 --></div>
   <ul class="city-map-link">
      <li><a  href="#" class ="map-mbox mapbtn"  data-type="post"><span class="tf-w">郵便ポスト</span></a></li>
      <li><a  href="#" class ="map-park mapbtn" data-type="park">公園</a></li>
      <li><a  href="#" class ="map-tbox mapbtn"  data-type="tel">公衆電話</a></li>
      <li><a  href="#" class ="map-css mapbtn"   data-type="css">観光地</a></li>
      <li><a  href="#" class ="map-all mapbtn"   data-type="all">すべて</a></li>
   </ul>

<script async src="https://maps.googleapis.com/maps/api/js?key=000000000000&callback=initMap"></script>

const data = [
  { name: "郵便ポスト", lat: 35.661077, lng: 140.159477 ,cate:'park'},
  { name: "公園", lat: 35.662087, lng: 140.159467 ,cate:'tel'},
  { name: "公衆電話", lat: 35.663097, lng: 140.159457,cate:'tel' },
  { name: "博物館", lat: 35.663097, lng: 140.159477,cate:'post' }
];

function initMap() {
  const center = {lat: 35.661077, lng: 140.159477};
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 16,
    center: center,
  });
  // 現在表示されているinfoWindowオブジェクト
  let currentWindow;
  let icon_img;
  let visible ;

  data.map(d => {
    // マーカーをつける
    if(d.cate === 'post'){
      icon_img = './images/map/icon_post.svg';
      visible = false;
    }else if(d.cate === 'park'){
      icon_img = './images/map/icon_park.svg';
      visible = false;
    }else if(d.cate === 'tel'){
      icon_img = './images/map/icon_tel.svg';
      visible = false;
    }else if(d.cate === 'css'){
      icon_img = './images/map/icon_css.svg';
      visible = false;
    }

    const $mapbtn = document.querySelectorAll('.mapbtn');
    $mapbtn.forEach((val,index) => {
    $mapbtn[index].addEventListener('click', e =>{
          const maptype = e.target.dataset.type;
        e.preventDefault();
      });
    });

    const marker = new google.maps.Marker({
      position: {lat: d.lat, lng: d.lng},
      map: map,
      icon:new google.maps.MarkerImage(
        icon_img,
        new google.maps.Size(30, 30),//マーカー画像のサイズ
        new google.maps.Point(0, 0),//マーカー画像表示の起点（変更しない）
        new google.maps.Point(15, 15)//マーカー位置の調整
      ),
      visible:visible,
    });

    // マーカークリックしたら地名をポップアップさせる
    marker.addListener('click', () => {
      currentWindow && currentWindow.close();
      const infoWindow = new google.maps.InfoWindow({content: d.name});
      infoWindow.open(map, marker);
      currentWindow = infoWindow;
    });
  });
}

現状では地図の取り込みはできていて、クリックではなく、直接変数visibleをtrueにすると
マーカー表示ができる状態です。

  data.map(d => {
    // マーカーをつける
    if(d.cate === 'post'){
      icon_img = './images/map/icon_post.svg';
      visible = true;
    }else if(d.cate === 'park'){
      icon_img = './images/map/icon_park.svg';
      visible = true;
    }else if(d.cate === 'tel'){
      icon_img = './images/map/icon_tel.svg';
      visible = true;
    }else if(d.cate === 'css'){
      icon_img = './images/map/icon_css.svg';
      visible = true;
    }

試したこと

  $mapbtn[index].addEventListener('click', e =>{
          const maptype = e.target.dataset.type;
        if(maptype === d.cate){
            visible = true;
        }
        e.preventDefault();
      });

定数のdataは運用時に400件くらいを想定しています。（jsonデータを読み込む予定です）
つたない説明で申し訳ございませんが、よろしくお願いいたします。

Answer 1

marker を配列などに入れておいて、visibleを操作すればいいのではないかな、と思いました。

setVisible | Marker  |  Maps JavaScript API  |  Google Developers

---

個人的には、markermanager を使うと楽かもしれないな、と思います。
Google Maps JavaScript API v3 Utilities

Comments

[take45]

早速の回答ありがとうございます。
ご紹介いただいたリンク先を参照いたしましたが、
私の英語力とプログラム力不足のため、
どのようにすれば解決できるかわかりませんでした。

大変申し訳ございませんが、もし可能なら
どこをどのように変更したら良いかご教授いただけるとありがたいです。

[Lhankor_Mhy]

失礼しました。markermanager はこの目的には合わなさそうでした。

具体的には、
const marker = new google.maps.Marker(
としているところを、配列にpushするなどしてマーカーの配列を作り、
$mapbtn[index].addEventListener('click', e =>{
の中で、配列を.forEachで回すなどして、ひとつづつ setVisible() メソッドで叩いていく、という流れがいいのではないかな、と思います。

[take45]

自己解決いたしました。
回答を受け止める実力がなく申し訳ございませんでした。
また、2度も回答いただきありがとうございました。

[Lhankor_Mhy]

ご解決されて何よりです。

[Lhankor_Mhy]

今更ですが、このページがtake45さんがやろうとしていることと、ほとんど同じことをしていますね。
http://cly7796.net/wp/javascript/switch-markers-displayed-by-google-maps-api/

[take45]

ありがとうございます。
正にやりたいことです。
既に解決案で実装を終えたので、次回アップデート時にご紹介いただいた方法で実装したいと思います。
大変参考になりました。

Answer 2

iniMap()で地図自体を何度も描画したくなかったので、全てのマーカ情報を得た上で、visible機能でマーカーのみ表示、非表示をしようとしていましたが、実力不足でうまくいかなかったので、
各マーカー情報を分け、iniMap()に引数を追加し、addeventListenerでiniMap()に再度引数を渡し再描画することで解決しました。

元データ

const data = [
  { name: "郵便ポスト", lat: 35.661077, lng: 140.159477 ,cate:'park'},
  { name: "公園", lat: 35.662087, lng: 140.159467 ,cate:'tel'},
  { name: "公衆電話", lat: 35.663097, lng: 140.159457,cate:'tel' },
  { name: "博物館", lat: 35.663097, lng: 140.159477,cate:'post' }
];


function initMap() {

}

変更データ

const dataPost = [
  { name: "郵便ポスト", lat: 35.661077, lng: 140.159477 ,cate:'post'},
 
];
const dataPark = [
  { name: "公園", lat: 35.662087, lng: 140.159467 ,cate:'park'},
];
const dataTel = [
  { name: "公衆電話", lat: 35.663097, lng: 140.159457,cate:'tel' },
];
const dataCss = [
  { name: "博物館", lat: 35.663097, lng: 140.159477,cate:'css' }
];
const dataAll = [
  { name: "郵便ポスト", lat: 35.661077, lng: 140.159477 ,cate:'post'},
  { name: "公園", lat: 35.662087, lng: 140.159467 ,cate:'park'},
  { name: "公衆電話", lat: 35.663097, lng: 140.159457,cate:'tel' },
  { name: "博物館", lat: 35.663097, lng: 140.159477,cate:'css' }
];



function initMap(data) {

}

const $mapbtn = document.querySelectorAll('.mapbtn');
    $mapbtn.forEach((val,index) => {
    $mapbtn[index].addEventListener('click', e =>{
          const maptype = e.target.dataset.type;
	  initMap(maptype)
          e.preventDefault();
        });
    });

ご回答いただいた方、ありがとうございました。