소개

이 기사에서는 Rails 앱에서 Google Map을 사용할 때 고정 된 위치를 표시하는 방법을 기록합니다.

특징은 다음과 같습니다.

Google Map API 사용

지정된 위도 경도의 장소에 핀을 찔러

핀의 정보창을 클릭하면 지정한 페이지로 전환

전환 된 페이지의 지정된 위치로 이동할 수 있습니다 (섹션 태그 사용)

페이지 전환을 없앨 수도 있습니다! !

이 기사 에 근거해, GoogleMap의 표시가 되어 있다고 가정합니다.

1. View 편집

posts/index.html.erb

<div id='map'></div>

<style>
#map {
  height: 600px;
  width: 100%;
}
</style>
<script>
    function initMap() {

      //初期表示位置：東京駅
      let latlng = new google.maps.LatLng(35.68114292160832, 139.76699220422807);
      //デザイン
      let styles = [
           {
            stylers: [
             { "saturation": 0 },
             { "lightness": 0 }
            ]
           }
          ];

      let map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5.3,　　//倍率を決める
          styles: styles,
          center: latlng
      });
      let transitLayer = new google.maps.TransitLayer();
      transitLayer.setMap(map);

      //複数マーカー ここから
        ( function() { 
          let markerLatLng = new google.maps.LatLng({lat: 35.170662, lng: 136.923430}); // 名古屋の位置情報を表示
          let marker = new google.maps.Marker({ 
            position: markerLatLng, 
            map: map 
          });
    　　　//マーカーをクリックしたとき、詳細情報を表示
          let infowindow = new google.maps.InfoWindow({
            position: markerLatLng,
            content: "<nav><a href='<%= tweets_url %>#first-block' target='_blank'>名古屋</a></nav>"
          }); //飛びたいページのURL、タグを入力
          marker.addListener('click', function() {
            infowindow.open(map, marker);
          });

       })();
       ( function() { 
        let markerLatLng = new google.maps.LatLng({lat: 34.397521, lng: 132.459266}); // 広島の位置情報を表示
        let marker = new google.maps.Marker({ 
          position: markerLatLng, 
          map: map 
        });
  　　　//マーカーをクリックしたとき、詳細情報を表示
        let infowindow = new google.maps.InfoWindow({
          position: markerLatLng,
          content: "<nav><a href='<%= tweets_url %>#second-block' target='_blank'>広島</a></nav>"
        }); //飛びたいページのURL、タグを入力
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });

     })();

     ( function() { 
        let markerLatLng = new google.maps.LatLng({lat: 38.260021, lng: 140.882344}); // 仙台の位置情報を表示
        let marker = new google.maps.Marker({ 
          position: markerLatLng, 
          map: map 
        });
  　　　//マーカーをクリックしたとき、詳細情報を表示
        let infowindow = new google.maps.InfoWindow({
          position: markerLatLng,
          content: "<nav><a href='<%= tweets_url %>#third-block' target='_blank'>仙台</a></nav>"
        }); //飛びたいページのURL、タグを入力
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });

     })();
      //複数マーカー ここまで  
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbOOQW7X6GRBDQbvKGXhHsw3R8j2Fe-XA&callback=initMap" async defer></script>　

지정하는 지도의 핀의 위치에 대해서

//複数マーカー ここから
        ( function() { 
          let markerLatLng = new google.maps.LatLng({lat: 35.17101, lng: 136.88149}); // 名古屋の位置情報を表示
          let marker = new google.maps.Marker({ 
            position: markerLatLng, 
            map: map 
          });

{lat: 35.170662, lng: 136.923430} 에 위도 경도를 입력합니다.
Google Map 에서 넣을 위치를 검색하고 핀 위치를 마우스 오른쪽 버튼으로 클릭하면 위도와 경도가 표시됩니다.

날고 싶은 전환 대상 URL에 대해

content: "<nav><a href='<%= tweets_url %>#third-block' target='_blank'>
　　名古屋</a></nav>"}); 
//飛びたいページのURL、タグを入力

계속해서, 천이처의 페이지 지정에 대해입니다.
Ruby를 사용하는 경우,$ rails routes하면 path가 표시된다고 생각합니다만, path 대신에 url이라고 말할 수 있습니다.

또한 페이지의 전환 위치를 지정할 때 태그를 사용하여 전환 대상 페이지를 작성한 다음<%= tweets_url %>뒤에#third-block와 같이 입력합니다.

section 태그의 사용법에 관해서는 이러한 기사를 참고해 주세요.
참조
ID 정보
페이지 내 전환 정보
2-5. 자기 소개 사이트를 만들자!

끝에

이제 Google Map을 사용할 때 고정된 위치를 볼 수 있었습니다!
Rails로 쓰고 있지만 Map에 관해서는 JS를 사용해야하며 잘 모른다! 라는 사람을 잘 본다.
확실히 잘 모르는 부분도 있습니다만, 어디가 어떤 바람에 대응하고 있는지를 생각하면 실마리는 발견되므로 자신의 필요에 따라 변경해 보세요!