Google Maps API를 사용하면 위치와 경로 표시를 포함할 수 있습니다.

가게나 회사의 액세스 등에서 사용되고 있는 자주 보는 Map입니다.
옛날에는 API 키를 사용하지 않아도 표시할 수 있었던 것 같습니다만, 지금은 API 키가 필요합니다.
통상의 사이트 정도라면 과금되는 것은 없다고 하는 것입니다만, 로드 횟수가 일정 이상이 되면 과금됩니다.

단, 제한을 걸 수 있으므로 설정을 실수하지 않으면 과금되므로 안심하고 사용합시다.

등록하여 사용하기

API 키를 얻으려면 먼저 Google Cloud Platform

Google Cloud

"콘솔"에서도 좋지만 "사용해보기"를 클릭하십시오.


Map을 사용하므로 ☑


프로젝트는 무엇이든 좋지만 이름을 결정합시다.

활성화되지 않은 경우

왼쪽 상단 메뉴 → API 및 서비스 → 대시보드


활성화합니다.


web 앱에 사용하므로 javascript 사용하기로 합니다.


이런 화면이 된다

API를 사용할 수 있도록 설정

자격 증명을 만들고 사용할 수 있도록합니다.


API 키 선택


자신의 키가 나옵니다. 닫지 않고 키 제한 클릭

부정하게 사용되지 않도록 제한

http 리퍼러로 제한합니다.
사용할 사이트의 URL을 입력합니다. *는 와일드 카드. www. 또는 루트 경로 아래에 적용합니다.
개발 환경이라면 localhost 등.
http://*.example.com/*（http の場合）
https://*.example.com/*（https の場合）
http://localhost/* とか http://*.localhost/*

복수 등록할 수 있으므로 개발 환경과 프로덕션 환경 등록해 두면 좋은 생각입니다.


API의 제한도 둡니다.

이번은 아직 JavaScript 밖에 사용하고 있지 않기 때문에 1 항목 밖에 없었습니다만, 복수 있었을 경우는 사용하는 것만 선택합니다.


할당 한도 설정
API 서비스 → 아래에있는 Maps JavaScript API → 할당


기사 작성 현재 1개월의 로드 횟수가 28500회이므로 28500/30=950

그래서 900이나 800 라든지 넣어 둡니다. 그렇게 하면 과금은 되지 않습니다.
(횟수는 확인해 둡시다. 제대로 설정하고 있으면 상한을 초과하는 것이 어려울 것입니다.)

과금 등록

그런데, 과금 설정하고 있지 않으면 이런 화면이 나옵니다.
번거롭지만 신용 등록이 필요합니다. 설정이 되어 있으면 과금되는 일은 없으므로 설정해 버립니다.

지도 표시

샘플 코드를 아무것도 쓰지 않은 페이지에 복사하면 이런 느낌으로 처음에는 표시된다고 생각합니다.


샘플 코드 1
샘플 코드 2

보고 싶은 장소 지정

lat와 lng: 숫자를 넣으면 특정 위치에 맞출 수 있습니다. 위도와 경도입니다.
도구를 사용하여 숫자를 확인하고 입력하면 OK

zoom: 클수록 줌. 1이 세계지도. 20이 건물 레벨. 조정합시다.
경도와 위도 조사

해당 부분을 변경하면 원하는 위치로 확대할 수 있습니다.

center: {lat: -34.397, lng: 150.644},
zoom: 8

기타 샘플

Maps Javascript API 이외도 있습니다만 경로등 표시할 수 있는 것 같습니다.
샘플: 경로


영어이지만 그 밖에도 다양한 패턴이 있습니다. 사이드 바에서 확인하고 사용해 보면 좋다고 생각합니다.


몇 개나 사용하는 경우 키의 액세스 횟수 제한 설정에 주의합시다.