Localhost 용 Googlemaps API 키


91

localhost에서 작동하도록 Googlemaps API 키를 얻으려면 어떻게해야합니까?

API 키를 만들었고 참조 자 아래에 다음을 추가합니다.

Accept requests from these HTTP referrers (websites) (Optional)

Use asterisks for wildcards. If you leave this blank, requests will be 
accepted from any referrer. Be sure to add referrers before using this key 
in production. 

localhost

이것은 작동하지 않으며 API 키를 제외하면 작동하지 않습니까?


답변:


130
  1. 이 주소로 이동 : https://console.developers.google.com/apis
  2. 프로젝트에 대한 API 키 만들기
  3. "라이브러리"를 클릭하십시오.
  4. 원하는 API를 클릭하십시오.
  5. "사용"을 클릭하십시오 (오른쪽 상단).
  6. "Credentials"> "Edit Key"를 클릭하십시오.
  7. "키 제한"에서 "HTTP 리퍼러 (웹 사이트)"를 선택합니다.
  8. 텍스트 필드에 웹 사이트 주소 (또는 로컬 테스트의 경우 "localhost", "127.0.0.1", "localhost : port"등)를 입력하고을 눌러 ENTER목록에 추가합니다.
  9. 프로젝트에서 키 사용

8
이것이 제가 한 일이기도하지만 궁금합니다. 이것은 로컬에서 작업하는 모든 사람 (localhost / 127.0.0.1)이 내 API KEY를 사용할 수 있다는 것을 의미합니까 (그리고 2018-06-11에 새로운 가격이 책정 된 후 비용을 추론 할 수 있음을 의미합니까?) ?)
tmanolatos

31
@tmanolatos 예, 그것이 의미하는 바입니다. 로컬에서 실행하는 동안 누구나 키를 사용할 수 있으므로 프로덕션 키에 localhost 권한을 부여하는 것은 좋지 않습니다. 대신 두 개의 키를 유지해야합니다. 누구나 볼 수있는 프로덕션 용으로 도메인에서만 허용되어야합니다. 하나는 자격 증명으로 취급되어야하고 (공유하지 말 것) localhost에서 액세스를 허용하는 개발 용입니다.
the_cheff

2
예 @tmanolatos,하지만 당신은 두 가지 핵심 테스트 응용 프로그램에 하나, 그리고 주요 애플 리케이션을위한 하나 구축해야
mirzaei.sajad

위 단계를 수행 한 후이 응답을 받았습니다. { "error_message": "리퍼러 제한이있는 API 키는이 API에서 사용할 수 없습니다.", "results": [], "status": "REQUEST_DENIED"} 다음은 URL입니다. , 여기서 DEV_KEY는 내 API 키로 대체됩니다. maps.googleapis.com/maps/api/geocode/…
rmutalik

PROD_KEY API 키를 사용할 때 올바른 JSON을 반환합니다.
rmutalik

10

이 방법으로 따를 수 있습니다. 적어도 나를 위해 작동합니다.

자격증 명 페이지 :

  1. IP 주소로 옵션을 선택하십시오 (옵션 번호 3).

  2. 공급자의 IP 주소를 입력하십시오. 그렇지 않은 경우 다음 링크를 사용하여 IP 주소를 검색하십시오. https://www.google.com/search?q=my+ip

  3. 저장해.

  4. scrip 태그 사이에 다음과 같이 Google지도 링크를 변경하십시오.

    https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzxxxxxxxx "

  5. API 키가 전파 될 때까지 약 5 분 이상 기다립니다.

이제 Google지도가 작동합니다.


9

localhost에서 작업하는 경우 개발을위한 별도의 API 키를 만든 다음 로컬 호스트에서 사용할 수 있도록 해당 키에 대한 제한을 제거합니다. 프로덕션에서이 키를 사용하지 않도록하여 온라인에서 사냥꾼에게 키를 노출하지 않도록하십시오.

나는 똑같은 문제가 있었고 내 로컬 호스트 환경에서 작동하는 제한을 얻으려는 모든 시도는 특별히 개발을 위해 별도의 apikey를 만든 다음 제한을 제거하기 전까지는 성공하지 못했습니다. 그러나 프로덕션 환경에서는 해당 키를 사용하지 않으며 개발이 완료되면 API 키를 즉시 삭제하겠습니다.

이 게시물이 늦었 음을 알고 있지만 앞으로이 문제에 직면 할 가능성이있는 사람들에게는 이것이 가장 좋은 방법입니다.


5

파티에 조금 늦었다 고 생각하지만 개발 (localhost) 및 제품을위한 별도의 키를 만드는 데 동의하지만 하나의 키로 만 둘 다 수행 할 수 있습니다.

응용 프로그램 제한-> http 참조 자-> 웹 사이트 제한을 사용할 때 와일드 카드 URL을 입력 할 수 있습니다.

그러나 .localhost / 와 같은 와일드 카드 사용 또는 .localhost : {port}. (이미 가지고있을 때 .yourwebsite.com / * ) 작동하지 않는 것 같습니다.

* 하나만 넣으면 작동하지만 이것은 기본적으로 원하는 것이 아닌 무제한 키를 제공합니다.

와일드 카드 *를 사용하지 않고 전체 경로를 포함하면 작동하므로 제 경우에는 다음을 입력하십시오.

http : // localhost {port} /
http : // localhost : {port} / something-else / 여기

동일한 API 키를 사용하여 Google지도가 www.yourwebsite.com에서와 같이 로컬에서 작동하도록합니다.

어쨌든 두 개의 개별 키를 갖는 것도 옵션 인 경우에는 그렇게하는 것이 좋습니다.


1

localhost에서 테스트하기 위해 Google지도를 사용하는 방법에 대한 이 자습서 를 따를 수 있습니다 .

다음과 같은 관련 SO 스레드를 확인하십시오.

도움이 되었기를 바랍니다!


2
끊어진 링크가 끊어졌습니다
Rafael Herscovici


@AEGrey-나에게는, 미래의 사용자에게는 아닙니다.
Rafael Herscovici

1

자바 스크립트 콘솔에서 특정 오류를 확인해야합니다 (예 : Windows 용 Firefox의 Ctrl+ Shift+ K).

Steven Gliebe (2016) 에 따르면 이 문제에 대한 4 가지 일반적인 사례가 있습니다. 요약하면 다음과 같습니다.

  1. MissingKeyMapError >> Google Maps API 키 가져 오기 (대안 2 번도 고려)
  2. RefererNotAllowedMapError >> Google 개발자 대시 보드localhost : port 를 등록합니다 .
  3. ApiNotActivatedMapError >> Google API 라이브러리 페이지 에서 Google Maps API 활성화
  4. InvalidKeyMapError >> 스크립트 / 코드에 를 올바르게 추가하십시오.

코드를 수정 한 후 필요에 따라 브라우저 캐시를 지우십시오.

다른 오류가있는 경우 Google Maps API 오류 코드 문서 페이지를 확인할 수 있습니다 .


0

"이 HTTP 리퍼러 (웹 사이트)의 요청 수락 (선택 사항)"이라고 표시된 경우 리퍼러를 나열 할 필요가 없습니다. 따라서이 페이지에서 localhost 옆에있는 X를 클릭하되 키를 계속 사용하십시오.

그런 다음 몇 분 후에 작동합니다.

변경 사항이 적용되는 데 몇 분 정도 걸릴 수 있으므로 다시 테스트하기 전에 몇 분 정도 기다리십시오.


0

Google 검색에 '내 IP'를 입력하면 내 공개 IP 주소를 가져 와서 IP 주소 (세 번째 옵션)에 붙여 넣었습니다. 그것은 나를 위해 작동합니다.


0

Google 검색에 '내 IP'를 입력하면 내 공개 IP 주소를 가져 와서 IP 주소 (세 번째 옵션)에 붙여 넣었습니다. 그것은 나를 위해 작동합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.