개요

Google Maps Embed API를 사용하여지도를 표시합니다.

API KEY조차 얻을 수 있다면 코드를 붙여 넣기 만하면됩니다

그래서 Google Maps Embed API KEY 취득 방법을 그림으로 정중하게 설명합니다.

절차

Google Maps Embed API 키 가져 오기

API 키 제한 확인

시도

Google Maps Embed API 키 가져오기

먼저 Google Maps Embed API 페이지로 이동

프로젝트를 만듭니다.



프로젝트 이름은 무엇이든 좋습니다. 이번은 otameshi-map-project라는 명칭으로 만들었습니다.



API key가 생성되므로 복사합니다. 이번은 AIzaSyCcbgwozCTpFwcXnHt1c-HRTHRWqep6Hto 였습니다.　(지금은 프로젝트를 삭제하고 있으므로 이 API KEY는 사용할 수 없습니다)

API 키 제한 확인

콘솔 으로 이동합니다.

화살표의 위치를 ​​선택하고 오른쪽 하단의 연필(?) 아이콘을 누릅니다.



API 키의 애플리케이션 제한을 확인합니다. 처음에는 없었습니다. 이것이라면 누구나 이용할 수 있는 상태이므로 프로덕션 환경에서 사용하는 경우는 애플리케이션의 제한을 붙일 필요가 있습니다. 예를 들어 HTTP 리퍼러를 선택하고 프로덕션 URL을 지정하면 됩니다.

development의 경우라면, 우선 없이 좋다고 생각합니다. (이번에는 없음 그대로 둡니다)

시도하다

test.html 파일을 만들고 아래 코드를 붙여넣습니다. <iframe ・・・ </iframe> 의 부분이 Google Maps Embed API로 작성되는 부분입니다. 자세한 형식은 이 페이지 를 보십시오.

test.html

<div>
  <h2>大國魂神社の地図</h2>
  <iframe frameborder="0" style="border:0; width: 100%; height: 50vh" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCcbgwozCTpFwcXnHt1c-HRTHRWqep6Hto&q=大國魂神社"
    allowfullscreen>
  </iframe>
</div>

적절한 브라우저에서 열면 다음과 같이 google map이 표시됩니다.


매우 간단합니다.

2018년 6월 10일 현재, Google Maps Embed API 무료 그래서 이것도 기쁘다.

이상입니다.