티스토리 뷰

API

Google Maps API 구글 지도 API 연동 - 1. 시작하기

열코 2026. 5. 14. 09:18
반응형

 

디지털 서비스에서 '위치'는 사용자 경험을 결정짓는 핵심 요소입니다. 맛집 앱, 차량 공유 서비스, 배달 플랫폼 등 우리 주변의 수많은 앱이 구글 지도를 기반으로 동작하고 있습니다. 하지만 초보 개발자나 기획자에게 Google Maps Platform의 복잡한 요금제와 설정 과정은 큰 진입 장벽이 되기도 합니다.

이 글 하나로 구글 지도 API 연동의 첫걸음을 완벽하게 떼실 수 있도록 정리해 드립니다.

Step 1. 구글 지도 API 금액(Pricing) 및 결제 정책 이해하기

연동을 시작하기 전, 가장 먼저 알아야 할 것은 "얼마인가?"입니다. 구글 지도 API는 과거에 비해 요금 체계가 훨씬 유연해졌지만, 신용카드 등록이 필수라는 점을 명심해야 합니다.

1.1 매달 제공되는 $200 무료 크레딧

Google Maps Platform의 가장 큰 장점은 매달 200달러(약 26만 원) 상당의 무료 크레딧을 모든 사용자에게 제공한다는 점입니다.

  • 개인 프로젝트나 소규모 서비스: 200달러 범위 내에서 충분히 무료로 운영 가능합니다.
  • 기업용 대규모 서비스: 무료 크레딧 소진 후 사용량에 따라 비용이 청구(Pay-as-you-go)됩니다.

1.2 주요 기능별 예상 비용 (예시)

  • Static Maps (정적 지도): 약 100,000회 로드까지 무료.
  • Dynamic Maps (동적 지도 - JS): 약 28,000회 로드까지 무료.
  • Places API (장소 검색): 데이터 요청 종류에 따라 다르지만 약 11,000~40,000건까지 무료.

1.3 주의사항: 결제 계정 등록 필수

무료 크레딧만 사용할 계획이더라도 Google Cloud 콘솔에 유효한 결제 수단(신용카드)을 반드시 등록해야 API 키가 활성화됩니다. 한도를 초과할 경우 자동 결제가 이루어질 수 있으므로, 콘솔 내에서 '예산 알림' 설정을 반드시 해두는 것이 좋습니다.

Step 2. API 키 발급 및 서비스 설정 (시작하기)

이제 본격적으로 API 키를 발급받아 보겠습니다. 모든 과정은 Google Cloud Console에서 진행됩니다.

2.1 프로젝트 생성

  1. Google Cloud 콘솔 접속 후 로그인을 진행합니다.
  2. 상단 프로젝트 선택 드롭다운에서 '새 프로젝트'를 클릭합니다.
  3. 프로젝트 이름(예: My Google Maps Project)을 입력하고 생성합니다.

2.2 API 및 SDK 활성화

단순히 프로젝트만 만든다고 지도가 나오지 않습니다. 내가 사용할 기능을 개별적으로 '활성화'해야 합니다.

  1. 콘솔 왼쪽 메뉴에서 [API 및 서비스] > [라이브러리]로 이동합니다.
  2. "Maps JavaScript API"를 검색하여 클릭한 후 [사용 설정] 버튼을 누릅니다. (웹 연동 기준)
  3. 필요에 따라 Places API, Geocoding API, Routes API 등도 활성화합니다.

2.3 API 키 생성 및 보안 설정 (매우 중요!)

  1. [API 및 서비스] > [사용자 인증 정보] 탭으로 이동합니다.
  2. [+ 사용자 인증 정보 만들기] > [API 키]를 선택합니다.
  3. 생성된 API 키는 즉시 복사해둡니다.
  4. 보안 설정(키 제한): 생성된 키를 클릭하여 '애플리케이션 제한사항'을 설정하세요.
    • HTTP 리퍼러(웹사이트): 내 웹사이트 도메인(예: *[.mywebsite.com/](https://.mywebsite.com/)*)에서만 키를 사용할 수 있도록 제한합니다. 이 설정을 하지 않으면 타인이 내 API 키를 도용해 비용을 발생시킬 수 있습니다.
반응형

Step 3. 지도 표기하기 (기초 연동 및 예제 코드)

이제 발급받은 API 키를 활용해 웹 페이지에 실제 지도를 띄워보겠습니다. 가장 널리 사용되는 Maps JavaScript API를 기준으로 설명합니다.

3.1 기본 HTML 구조 및 스크립트 로드

구글 지도를 띄우기 위해서는 지도가 들어갈 '그릇(Container)'과 구글의 '스크립트'가 필요합니다.

HTML
 
<!DOCTYPE html>
<html>
<head>
    <title>Google Maps API 연동 기초</title>
    <style>
        /* 지도가 표시될 영역의 크기를 반드시 지정해야 합니다. */
        #map {
            height: 500px;
            width: 100%;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

    <h3>나의 첫 번째 구글 지도</h3>
    <!-- 지도가 렌더링될 div -->
    <div id="map"></div>

    <!-- 구글 지도 API 스크립트 (YOUR_API_KEY 부분에 발급받은 키 입력) -->
    <script async
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

    <script>
        // 지도를 초기화하는 함수
        function initMap() {
            // 지도 중심 좌표 (위도, 경도: 서울시청 기준)
            var seoulCityHall = { lat: 37.5665, lng: 126.9780 };
            
            // 지도 객체 생성
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,          // 확대 레벨 (1~20)
                center: seoulCityHall // 지도 중심 설정
            });

            // 마커 표시하기
            var marker = new google.maps.Marker({
                position: seoulCityHall,
                map: map,
                title: "서울시청입니다!"
            });
        }
    </script>
</body>
</html>

3.2 코드 주요 포인트 설명

  1. callback=initMap: 구글 지도 라이브러리가 로드 완료된 후 실행할 함수명을 지정합니다.
  2. zoom: 숫자가 커질수록 더 자세히 확대됩니다. (1: 지구 전체, 15: 동네 수준, 20: 건물 수준)
  3. center: { lat: 위도, lng: 경도 } 형태의 객체로 중심점을 잡습니다.
  4. google.maps.Map: 첫 번째 인자는 HTML 요소, 두 번째 인자는 설정 옵션을 받습니다.

Step 4. 고급 활용을 위한 팁

  • 마커 커스터마이징: 기본 핀 모양 대신 서비스 로고나 아이콘 이미지를 사용할 수 있습니다.
  • 이벤트 리스너: 마커를 클릭했을 때 정보창(InfoWindow)을 띄우거나 특정 페이지로 이동하는 로직을 추가하세요.
  • 반응형 레이아웃: CSS의 vh, % 단위를 활용해 모바일 환경에서도 최적화된 지도를 제공하세요.

 

#구글지도API #GoogleMapsPlatform #구글맵연동 #API발급방법 #구글지도요금 #웹개발 #JavascriptMaps #구글맵SDK #코딩튜토리얼 #위치기반서비스

반응형
저작자표시 (새창열림)

'API' 카테고리의 다른 글

Google Maps API 구글 지도 API 연동 - 5. 커스터마이징  (0) 2026.05.14
Google Maps API 구글 지도 API 연동 - 4. 클러스터링  (0) 2026.05.14
Google Maps API 구글 지도 API 연동 - 3. 장소  (0) 2026.05.14
Google Maps API 구글 지도 API 연동 - 2. 길찾기  (0) 2026.05.14
카카오 지도 연동하기  (0) 2026.05.10
카카오 로그인 연동하기  (0) 2026.05.10
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/05   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함
반응형