목표

개발 환경

· Ruby : 2.5.7
·Rails: 5.2.4
·Vagrant: 2.2.7
· VirtualBox : 6.1
· OS : macOS Catalina

전제

하기 실장 완료.

· Google 계정이 작성되었습니다.
· Slim 도입

Google Cloud Platform에 가입

1. 아래 링크에 액세스

Google Cloud Platform

2. "사용해보기"를 클릭

3. 프로젝트 이름 (적당하고 좋은)을 입력하고 만들기를 클릭

4. 결제 계정 만들기를 클릭합니다.

5. 이용약관을 체크하고 '계속'을 클릭

6. 결제 정보를 입력하고 '무료 평가판 시작'을 클릭합니다.

API 키 가져오기

1. API 개요로 이동을 클릭합니다.

2. API 및 서비스 사용을 클릭합니다.

3. "Maps JavaScript API"를 클릭

4. "사용"을 클릭

5. "인증 정보"를 클릭

6. 'API 및 서비스 자격 증명'을 클릭합니다.

7. "자격 증명 만들기"를 클릭

8. "API 키"를 클릭

9. 일단 "닫기"를 클릭

10. API 키 이름을 클릭합니다.

11. 자격 증명 설정

①응용제한なし를 선택합니다.

②API 제한キーを制限를 선택하고 풀다운 메뉴에서 Maps JavaScript API를 선택합니다.

③ Maps JavaScript API 가 선택되어 있는지 확인하고 保存

12. 빨간색 테두리로 둘러싸인 마크를 클릭하고 API 키 복사

구현

1.API 키를 환경 변수화

① "gem 'dotenv-rails'"도입

Gemfile

gem 'dotenv-rails'

터미널

& bundle

② 어플리케이션 바로 아래에 ".env"파일을 작성
※어플리케이션의 디렉토리로 이동하고 나서 이하의 커멘드를 실행

터미널

$ touch .env 

③ .env 파일 편집

.env

GOOGLE_MAP_API = 'コピーしたAPIキー' # 追記

④ .gitignore 파일 편집

.gitignore

/.env # 追記

2. 뷰 편집

~html.slim

/ マップを表示
#map style='height: 500px; width: 500px;'

/ APIを読み込み
- google_api = "https://maps.googleapis.com/maps/api/js?key=#{ ENV['GOOGLE_MAP_API'] }&callback=initMap".html_safe
script{ async src=google_api }

javascript:

  let map;

  function initMap() {
    geocoder = new google.maps.Geocoder()

    // マップを作成
    map = new google.maps.Map(document.getElementById('map'), {
      // マップの中心に表示する場所の緯度経度を指定
      center: { lat: 40.7828, lng:-73.9653 },
      zoom: 12,
    });

    // マーカーを立てる場所の緯度経度を指定
    marker = new google.maps.Marker({
      position: { lat: 40.7828, lng:-73.9653 },
      map: map
    });
  }

주의

turbolinks 를 무효화하지 않으면 맵이 전환되지 않으므로 반드시 무효화해 둡시다.

turbolinks를 비활성화하는 방법