Google 지도 API 사용하기

API key 발급받기

Google Map Platform에 접속하여 API key를 발급받는다.

JavaScript를 사용하여 Google 지도 추가하기

Google에서는 크게 4 분야로 구분하여 여러 API를 제공한다.

그 중 Google Maps JavaScript API 문서 에서는 지도 API를 웹사이트에 통합하는 방법을 설명한다. 이 문서를 참고하여 웹/앱에서 지도 관련 필요한 기능을 구현할 수 있다.

원하는 위치의 위도와 경도 확인하기

Google Maps에서 위치 우클릭 후, '이 위치 공유'를 클릭하면 위도와 경도를 확인할 수 있다.

지도를 페이지에 로드하기

<gmp-map
       center="36.300058, 127.063568"
       zoom="17"
       map-id="DEMO_MAP_ID"
       style="height: 400px"
></gmp-map>
<script 
        src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=maps,marker&v=beta"
                defer
        ></script>

HTML 파일에 위와 같은 script를 로드해준다. MY_API_KEY 부분에는 내 실제 API key를 붙여넣으면 된다.

ApiNotActivatedMapError

API 발급 후 JavaScript로 지도를 로드하려고 했더니 위와 같은 Error가 발생했다.

이는 Maps JavaScript API가 API 프로젝트에서 활성화되지 않았다는 것이다.
Google Cloud 콘솔의 API에서 Maps JavaScript API를 사용 설정해야 한다.

API 및 서비스 탭에서 설정할 수 있다.
Maps JavaScript API를 이용할 것이므로, Enable이었던 버튼을 누르면 위 사진과 같이 Disable 버튼으로 바뀌며 활성화상태가 된다.

마커 추가하기

Google Maps JavaScript API 문서 에서 원하는 기능을 선택하면 단계별 방법을 학습할 수 있다.

마커를 위한 HTML 태그 추가하기

<gmp-map
       center="36.300058, 127.063568"
       zoom="17"
       map-id="DEMO_MAP_ID"
       style="height: 400px"
>
<gmp-advanced-marker
       position="36.300058, 127.063568"
       title="title"
       ></gmp-advanced-marker>
       </gmp-map>

최종 화면