Google Map にマーカーを付けてみた

JavaScript 教えてgoo

100均のダイソーの店舗情報のようなマップを作りたい その方法について
https://oshiete.goo.ne.jp/qa/10253056.html

この程度の回答で文字制限に引っかかるとは！
click イベントをマーカーに貼り付けようと思って
m.addEventListener ('click', ....
ここでエラーがでて、いきづまってしまった。
よく見たら
m.addListener (...
だった。


もしかしてだけど、アニメーション的なのが要望だったのか？

<!DOCTYPE html>
<html lang="ja">
<title>Google Maps APIテスト</title>
<meta charset="utf-8">
<style type="text/css">
#container {
	width: 1000px;
	margin: 0 auto;
}
#sample {
	width: 1000px;
	height: 800px;
}
</style>

<body>
<div id="container">
	<div id="sample"></div>
</div>


<script src="https://maps.googleapis.com/maps/api/js?key="></script>
<script>

{ //GoogleMap
    
  const
    tool = google.maps,

    createHtml = (n, t) =>
      '<div class="sample">' + n + '<br>' + t + '</div>',
    
    createMap = (target, latlng, zoom) =>
      new tool.Map (target, { center: new tool.LatLng (latlng), zoom }),
    
    createMark = (map, markers) =>
      markers.map (([lat, lng, name, text, url]) => {
        let
          p = new P (lat, lng),
          m = new tool.Marker ({ position: new tool.LatLng (p), map}),
          f = new tool.InfoWindow ({ content: createHtml (name, text)});

        if (url)
          m.setOptions ({ icon: { url }});

          m.addListener ('click', f.open.bind (f, map, m), false);
        return m;
      });
  

  class P { //position
    constructor (lat, lng) {
      this.lat = lat;
      this.lng = lng;
    }
  }
    
  
 
  class GoogleMap {
    constructor (target, [lat, lng], zoom = 15, markers = []) {
      if (3 > arguments.length)
        throw new Error (alert ('引数が不足'));

      this.target = target;
      this.position = new P (lat, lng);
      this.map  = createMap (target, this.position, zoom);
      this.mark = createMark (this.map, markers);
    }    
  }
  
  this.GoogleMap = GoogleMap;
}




let src = [
  "data:image/png;base64,",
  "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"
].join ('\n');

let
  target   = document.querySelector ('#sample'),
  position = [35.679000, 139.780000],
  zoom     = 13,
  markers  = [
    [35.710001, 139.810666, '東京スカイツリー', '高さ634m'],
    [35.658641, 139.745473, '東京タワー', '高さ333m', src]
  ],
  map = new GoogleMap (target, position, zoom, markers);

</script>

アニメーションを付加してみる

<!DOCTYPE html>
<html lang="ja">
<title>Google Maps APIテスト</title>
<meta charset="utf-8">
<style type="text/css">
#sample {
	width: 1000px;
	height: 800px;
}
</style>

<body>
<div id="sample"></div>


<script src=
  "https://maps.googleapis.com/maps/api/js?key="
></script>
<script>

{ //GoogleMap

  const
    tool = google.maps,

    createHtml = (n, t) =>
      '<div class="sample">' + n + '<br>' + t + '</div>',

    createMap = (target, latlng, zoom) =>
      new tool.Map (target, { center: latlng, zoom }),

    createMarker = markers =>
      markers.map (([lat, lng, title, text, icon], i) =>
        new tool.Marker ({
          title,
          //label: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[i],
          position: new P (lat, lng),
          animation: tool.Animation.DROP,
          //draggable:true,
          icon
        })),

    createInfoWin = markers =>
      markers.map (([lat, lng, title, text, icon]) =>
        new tool.InfoWindow ({ content: createHtml (title, text)})),

    addClickEvent = (map, marker, infoWin) =>
      marker.forEach ((m, i) =>
        m.addListener ('click', infoWin[i].open.bind (infoWin[i],map, m))
      );



  class P { //position
    constructor (lat, lng) {
      this.lat = lat;
      this.lng = lng;
    }
  }



  class GoogleMap {
    constructor (target, [lat, lng], zoom = 15, markers = []) {
      if (3 > arguments.length)
        throw new Error (alert ('引数が不足'));

      this.target = target;
      this.map = createMap (target, new P (lat, lng), zoom);
      this.marker = createMarker (markers);
      this.infoWin = createInfoWin (markers);

      this.addClickInfo ();

      setTimeout (this.setMark.bind (this), 1500);
      setTimeout (this.setAnimeBounce.bind (this), 3500);
    }

    setMark (wait = 2000) {// ms秒かけてマーカーの全てを表示する
      let interval = 2000 / (this.marker.length || 1);
      this.marker.forEach ((m, i) =>
        setTimeout (m.setMap.bind (m, this.map), interval * i));
    }

    setAnimeBounce () {
      this.marker.forEach (m =>
        m.setAnimation (tool.Animation.BOUNCE));
    }

    removeMark (wait = 0) {
      let interval = 2000 / (this.marker.length || 1);
      this.marker.forEach ((m, i) =>
        setTimeout (m.setMap.bind (m, null), interval * i));
    }

    addClickInfo () {
      addClickEvent (this.map, this.marker, this.infoWin);
    }
  }

  this.GoogleMap = GoogleMap;
}



let
  target   = document.querySelector ('#sample'),
  position = [35.679000, 139.780000],
  zoom     = 13,
  markers  = [
    [35.710001, 139.810666, '東京スカイツリー', '高さ634m'],
    [35.658641, 139.745473, '東京タワー', '高さ333m']
  ];

new GoogleMap (target, position, zoom, markers);

</script>