MonstarX 앱에 Google Maps 연결하기
핵심 요약앱은 이미 무료로 지도를 보여 줄 수 있습니다. 장소 검색, 입력하는 동안 주소 자동 완성, 업체 정보와 리뷰, 길찾기처럼 Google의 데이터가 필요할 때 Google Maps를 연결하세요. Google Cloud에서 API 키를 만들어 백엔드 → 클라우드에 붙여 넣고 기능을 요청하면 됩니다.
Google의 지도, 장소 검색, 길찾기를 앱에 넣습니다.
- 유형
- 내 앱에서 사용
- 카테고리
- 지도와 장소
- 연결 방법
- API 키
Google Maps Platform은 지도 데이터를 제공하는 Google의 서비스입니다. Google 지도 뒤에 있는 장소, 주소, 영업시간, 리뷰, 경로 정보가 여기에 담겨 있습니다. 연결하면 앱이 이 데이터에서 정보를 찾아볼 수 있습니다.
지도 자체를 보여 주는 데는 필요 없습니다. 모든 MonstarX 앱은 핀을 꽂고 이동하고 확대할 수 있는 거리 지도를 무료로 그릴 수 있습니다. 앱에 지도 넣기를 참고하세요. Google Maps는 그런 지도만으로는 알 수 없는 정보가 필요할 때 씁니다.
무엇을 만들 수 있나요?
섹션 제목: “무엇을 만들 수 있나요?”- 주소 자동 완성: 주소를 입력하기 시작하면 Google의 추천 목록에서 고를 수 있습니다.
- 장소 검색: “내 주변 카페”, “성수동 물리치료사” 같은 검색 결과를 목록과 지도로 보여 줍니다.
- 업체 정보: 장소의 영업시간, 전화번호, 평점, 리뷰
- 지도에 주소 표시: 입력한 주소를 핀으로 바꿉니다(이를 지오코딩이라고 합니다).
- 두 장소 사이의 운전 경로 안내
시작하기 전에
섹션 제목: “시작하기 전에”- 결제 계정이 연결된 Google Cloud 계정이 필요합니다. Google Maps Platform은 매달 주어지는 무료 사용량 안에서 쓰더라도 결제 계정을 요구합니다(Google 요금 참고).
- 앱용 Google Cloud 프로젝트가 필요합니다.
키 발급받기
섹션 제목: “키 발급받기”-
Google Cloud 콘솔에서 프로젝트를 고르거나 새로 만들고 Google Maps Platform을 여세요.
-
앱에서 쓸 API를 사용 설정하세요. 위의 예시라면 검색과 자동 완성에는 Maps JavaScript API와 Places API (New), 주소에는 Geocoding API, 길찾기에는 Routes API가 필요합니다.
-
키 및 사용자 인증 정보(Keys & Credentials)를 열고 API 키를 만드세요. 키를 복사하세요(
AIza로 시작합니다). -
키를 제한하세요. API 제한사항(API restrictions)에서 사용 설정한 API만 허용하세요.
MonstarX에서 연결하기
섹션 제목: “MonstarX에서 연결하기”-
프로젝트를 열고 상단 바에서 백엔드를 클릭한 다음 클라우드를 클릭하세요.
-
커넥터에서 Google Maps 옆의 연결을 클릭하세요.
-
API 키에 키를 붙여 넣으세요.
-
Google Maps 연결을 클릭하세요. 행에 연결됨이 표시되고, 미리보기가 새 키로 다시 시작됩니다.
MonstarX에 사용 요청하기
섹션 제목: “MonstarX에 사용 요청하기”| 입력 예시 | 결과 |
|---|---|
| “예약 양식의 주소 입력란에 Google Maps 자동 완성을 넣어 주세요.” | 입력하는 동안 추천 주소가 나타나고, 고른 주소가 저장됩니다. |
| “Google Places 검색으로 ‘가까운 스튜디오 찾기’ 페이지를 추가해 주세요.” | 검색창과 함께 이름, 주소, 평점이 담긴 결과가 지도에 핀으로 표시됩니다. |
| “카페마다 Google의 영업시간과 평점을 보여 주세요.” | 장소마다 Google에서 가져온 업체 정보가 표시됩니다. |
| “기사님에게 물류 창고에서 각 배송지까지 가는 길을 알려 주세요.” | 거리와 소요 시간이 담긴 경로가 표시됩니다. |
보안과 개인정보 보호
섹션 제목: “보안과 개인정보 보호”- 이 키는 공개 키입니다. 앱 사용자의 브라우저에서 쓰이므로 숨겨지지 않습니다. 키를 보호하는 것은 Google Cloud에서 건 제한입니다.
- 키는 이 앱에만 저장됩니다. 키 이름은 백엔드시크릿에 표시됩니다.
- Google Maps 연결, 키 업데이트, 연결 해제는 프로젝트 소유자만 할 수 있습니다.
- 키를 교체하려면 Google Cloud에서 새 키를 만들고 Google Maps 행에서 키 업데이트를 클릭해 붙여 넣은 뒤 키 저장을 클릭하세요. 앱을 다시 게시한 다음 이전 키를 삭제하세요.
알아 두면 좋은 점
섹션 제목: “알아 두면 좋은 점”- 지도 모양은 그대로입니다. Google Maps는 앱에 데이터와 검색 기능을 더할 뿐, Google의 지도 타일을 쓰지는 않습니다.
- 매달 주어지는 무료 사용량을 넘으면 Google이 요청마다 요금을 청구합니다. Google Cloud 결제에서 예산 알림을 설정하세요.
- 위성 지도나 Mapbox 지도 스타일이 필요한가요? Mapbox를 참고하세요.
- Google 약관에는 결과 옆에 Google 출처를 표시하는 등 장소 데이터를 보여 줄 때의 규칙이 있습니다. 앱에서 장소 목록을 보여 준다면 MonstarX에 출처 표시를 추가해 달라고 하세요.
자주 묻는 질문
섹션 제목: “자주 묻는 질문”지도를 보여 주려면 Google Maps가 필요한가요?
아니요. 모든 MonstarX 앱은 키 없이 무료로 지도를 그릴 수 있습니다. 장소, 자동 완성, 업체 정보, 길찾기가 필요할 때만 Google Maps를 연결하세요.
Google에서 API가 사용 설정되지 않았다고 나오는 이유는 무엇인가요?
Google Maps 서비스는 Google Cloud 프로젝트에서 하나씩 사용 설정해야 합니다. 오류에 나온 API(예: Places API (New))를 사용 설정하세요.
키가 브라우저에 있어도 안전한가요?
네, 앱에서 쓰는 API로 제한해 두었다면 안전합니다. Google은 이 키를 웹페이지에서 쓰도록 설계했습니다.
Google Maps와 Mapbox 중 무엇을 써야 하나요?
장소, 업체 정보, 리뷰가 필요하면 Google Maps를, 지도 스타일을 꾸미거나 위성 지도가 필요하면 Mapbox를 쓰세요. 둘 다 주소를 핀으로 바꾸고 길찾기를 제공합니다.