콘텐츠로 이동

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 프로젝트가 필요합니다.
  1. Google Cloud 콘솔에서 프로젝트를 고르거나 새로 만들고 Google Maps Platform을 여세요.

  2. 앱에서 쓸 API를 사용 설정하세요. 위의 예시라면 검색과 자동 완성에는 Maps JavaScript API와 Places API (New), 주소에는 Geocoding API, 길찾기에는 Routes API가 필요합니다.

  3. 키 및 사용자 인증 정보(Keys & Credentials)를 열고 API 키를 만드세요. 키를 복사하세요(AIza로 시작합니다).

  4. 키를 제한하세요. API 제한사항(API restrictions)에서 사용 설정한 API만 허용하세요.

  1. 프로젝트를 열고 상단 바에서 백엔드를 클릭한 다음 클라우드를 클릭하세요.

  2. 커넥터에서 Google Maps 옆의 연결을 클릭하세요.

  3. API 키에 키를 붙여 넣으세요.

  4. Google Maps 연결을 클릭하세요. 행에 연결됨이 표시되고, 미리보기가 새 키로 다시 시작됩니다.

입력 예시결과
“예약 양식의 주소 입력란에 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를 쓰세요. 둘 다 주소를 핀으로 바꾸고 길찾기를 제공합니다.