[자바스크립트] 구글 블로그(Blogger)에 구글 맵 API 삽입하는 방법 (Google Maps API)
안녕하세요? 어쩔수입니다.
앞으로는 구글 블로그에 한국의 음식점 리뷰 등을 영어로 쓸까 합니다. 음식점 위치를 글 말미에 지도 API로 보여줄 수 있으면 좋겠죠? 그리고 외국인들에게 더 익숙한 구글 지도 API로 독자에게 보여줄 수 있으면 더 좋을 것 같습니다. 그래서 저도 지금 이렇게 블로그에 쓰면서 구글 맵 API를 쓰는 방법을 연습해보려고 합니다.
비록, 이 포스팅에서는 Maps Embed API를 삽입하는 방법에 대해 다루지만 Dynamic, Static Map을 웹 프로그래밍에 사용하고 싶으신 분들도 이 포스팅을 순서대로 따라오시면 무리 없이 원하는 용도로 사용하실 수 있을 것입니다.
그럼 시작해 봅시다.
1. 일단 구글에 Google Maps API라고 검색하거나, 아래 링크 웹사이트에 접속해줍니다.
https://developers.google.com/maps
'시작하기'를 눌러봅시다.
저는 결제 계정을 등록한 적도 없고 여기에 접속한 것이 완전 처음이니, 한 번 더 시작하기 버튼을 눌러야겠네요. 구글 클라우드 플랫폼도 네이버와 마찬가지로 결제수단을 등록해야 하네요. 자동 결제를 설정하지 않는 이상 요금이 과금되지 않는다고 합니다.
그래도 요금제에 대해 간단히는 알아두는 것이 좋겠죠?
저는 블로그 포스팅에 지도를 첨부하는 방식인 Embed 지도를 사용할 계획이므로, 무제한으로 가격 걱정 없이 API를 사용할 수 있습니다.
참고로, Static Map은 스크린 샷처럼 고정된 지도, Dynamic Maps는 터치, 클릭 등을 통해 지도 좌표, 확대 정도를 바꿀 수 있는 지도를 말합니다. 웹 프로그래밍 시에 사용됩니다.
2. 이제 요금제에 대해서 알았으니 안심하고 결제 수단을 등록합니다.
3. 제품 설정 차례네요. 지도, 경로, 장소가 옵션입니다. 저는 일단 혹시 모르니 세 개 다 선택했습니다. 간단한 설문 조사 후 API Key를 발급 받았습니다. 추후에 Credentials Section에서 다시 조회할 수 있다고 하나, 일단 클립보드에 복사해 두겠습니다. Credentials Section에 들어가는 방법은 글 말미에 한번 더 다루겠습니다.
3. 드디어 뭔가 진행할 수 있을 것 같은 화면이 나왔네요. 'API 선택' 버튼을 클릭하겠습니다.
다양한 API 옵션이 나오네요. '모두 보기(17개)'를 클릭한 뒤 'Maps Embed API'를 선택하겠습니다.
마침, 구글에서 준비해둔 튜토리얼이 있는 것 같네요. 저는 준비된 예제를 살짝 변형해서 입맛에 맞게 사용하는 방법을 가장 선호합니다. 'Documentation'을 클릭하겠습니다.
준비된 예제는 다음과 같습니다.
API Key는 본인의 키로 넣어줍니다. API Key 찾는 방법은 글 맨 아래에 적겠습니다.
<iframe width="600" height="450" style="border:0" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/place?key=API_KEY &q=Space+Needle,Seattle+WA"> </iframe>
4. 구글에서 준비한 Hello World 예제를 실습해보겠습니다.
5. 이번에는 제가 원하는 지역을 보여주도록 변형해보겠습니다.
API Key를 수정한 뒤, 지역명에 Kervan, Seoul이라고 설정했습니다.
+++API Key 찾는 방법
Comments
Post a Comment