04
14
백엔드/웹개발

[웹개발] 구글 지도 api 웹에 적용하기 / For development purposes only 해결법

728x90
아래의 홈페이지로 접속

https://console.cloud.google.com/apis/library?project=true-record-283402 

 

Google Cloud Platform

하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요.

accounts.google.com

 

Maps JavaScripts API 클릭

 

사용 클릭

새 프로젝트 생성

 

구글 클라우드 플랫폼의 API 및 서비스 -> 라이브러리 메뉴

사용할 API를 추가하기 위해 아래의 메뉴로 이동

 

Maps JavaScript API 사용 클릭

API 및 서비스 -> 사용자 인증 정보 클릭

 

사용자 인증 정보 만들기 -> API키 클릭

 

API 키가 생성된것을 확인가능

1. 구글맵을 홈페이지에 띄우기 위한 첫번째 방법

Google Maps API 소스코드를 가져오기위해 아래의 홈페이지에 접속

https://developers.google.com/maps/documentation

 

Google Maps Platform  |  Google Developers

의견 보내기 지도 정적 지도 및 동적 지도, 스트리트 뷰 이미지, 360도 보기로 장소의 실제 모습을 보여주는 반응이 빠르고 맞춤설정된 환경을 사용자에게 제공하세요. 포함된 기능: 지도, 스트리

developers.google.com

 

Overview -> A quick example의 YOUR_APT_KEY 부분에 발급받은 API키를 삽입 후 해당 코드 복사

 

HTML img에 해당 소스코드를 복사 붙여넣기 하여 사용하면 정적인 구글 지도 삽입이 가능

2. 구글맵을 홈페이지에 띄우기 위한 두번째 방법

YOUR_KEY 부분에 발급받은 API키를 삽입 후 실행
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Google Map</title>
</head>

<body>
  <div id="map" style="width:100%; height: 100vh;"></div>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap&region=kr"></script>
  <script>
    function initMap() {
      var seoul = { lat: 37.5642135 ,lng: 127.0016985 };
      var map = new google.maps.Map(
        document.getElementById('map'), {
          zoom: 12,
          center: seoul
        });
      
    }
  </script>
</body>
</html>

 

실행하면 서울을 중심으로 하는 구글 맵이 홈페이지에 띄워지게 되며 아래와 같이 Google 지도를 제대로 로드할 수 없다는 메시지가 뜨게 된다.

 

For development purposes only라고 뜨는 위의 현상을 해결하기 위해서는 구글 클라우드 플랫폼에서 메뉴 -> 결제 -> 결제 수단을 등록해주면 정상적인 구글 지도 API 사용이 가능해진다.

 

[참고한 사이트]

728x90
저작자표시 (새창열림)

'백엔드 > 웹개발' 카테고리의 다른 글

[웹개발] IntelliJ 설치  (0) 2022.03.31
[웹개발] REST?  (0) 2022.03.24
[웹개발] 타일즈(tiles)  (0) 2022.03.18
[웹개발] 메이븐 프로젝트의 구조와 구성요소  (0) 2022.03.18
[웹개발/이클립스] 메이븐 설치하기  (0) 2022.03.17
COMMENT
 

티스토리툴바