学習58日目

内容

google map上に複数のマーカーを表示させる。

前提

• google mapの表示機能は実装済
• 追記部分以外の記述は省略

手順

複数の位置情報の入った配列を定義する。
xxxx.html.erb

<script>
  let markers = []
  let infoWindows = []
  let locationDatas = [
    {
      name: '御茶ノ水駅',
      lat: 35.6993529,
      lng: 139.76526949999993
    }, 
    {
      name: '神保町駅',
      lat: 35.695932,
      lng: 139.75762699999996
     }
   ]
   for (var i = 0; i < locationDatas.length; i++) {
     markerLocation = new google.maps.LatLng({lat: locationDatas[i]['lat'], lng: locationDatas[i]['lng']})
     markers[i] = new google.maps.Marker({
       position: markerLocation,
       map: map
     })
     infoWindows[i] = new google.maps.InfoWindow({
       content: '<div class="marker_info">' + locationDatas[i]['name'] + '</div>'
      })
      markerClick(i)
  function markerClick(i) {
    markers[i].addListener('click', function() {
      infoWindows[i].open(map, markers[i])
    })
  ｝
</script>

コメント

これを応用すれば、各マーカーにリンクをつけることも可能ではないかと感じた。