Bubble.io에서 Google 지도를 어떻게 삽입하나요?

단계 1: Google 개발자 콘솔에서 프로젝트를 생성합니다. 콘솔로 이동하여 로그인하고, Bubble.io 앱에 대한 새 프로젝트를 설정합니다. 이 프로젝트는 API 사용량과 청구를 추적하는 데 사용됩니다.

단계 2: 프로젝트가 생성되면 Google 개발자 콘솔에서 API 및 서비스 > 라이브러리로 이동합니다. 다음 Google API를 검색하고 활성화합니다: 지오코딩 API, 장소 API, 지리위치 API, 맵 자바스크립트 API, 시간대 API.

단계 3: Google 개발자 콘솔의 API 및 서비스 > 자격 증명 영역으로 이동합니다. 한 개는 클라이언트를 위한 것이고 다른 한 개는 서버를 위한 것으로 API 키 두 개를 생성합니다.

단계 4: 보안을 위해 API 키에 제한을 적용합니다. 클라이언트 API 키의 경우, HTTP 리퍼러를 통해 제한하며, Bubble 앱의 URL을 "https://appname.bubbleapps.io/\*"형식으로 추가합니다. 서버 API 키의 경우 사용 제한을 단지 방금 활성화한 Google API로 합니다.

단계 5: 서버 API 키를 Bubble의 설정 > 일반 섹션에 복사하고, "Google 지오코드 API 키" 필드에 입력합니다. 클라이언트 API 키를 같은 Bubble 앱의 설정 영역에 있는 "Google 맵 API 키" 필드에 복사합니다.

단계 6: Google 맵을 Bubble 앱에 포함시키려면, 앱 페이지에 맵 요소를 추가합니다. Bubble 에디터의 디자인 탭으로 이동하고, 시각적 요소 영역에서 맵 요소를 찾아 캔버스에 드래그합니다.

단계 7: 맵 요소를 추가한 후에는 검색 결과와 같은 동적 데이터 입력을 설정하여, 맵의 중앙 및 관심 지점들을 지정하도록 구성합니다.

단계 8: 앱을 저장하고 변경 사항을 배포하십시오. Google 맵은 이제 Bubble.io 앱에 포함되어야하며, 지정된 데이터 또는 위치 입력에 중심이 맞춰진 맵을 표시합니다.

API 키 또는 서비스의 변경 사항은 몇 분 동안 전파되는 데 시간이 걸릴 수 있으므로, 맵이 즉시 나타나지 않으면 기다렸다가 다시 시도해보십시오. 또한 Bubble 애플리케이션에서 Google 맵 데이터의 일관성이 떨어질 경우 숨겨진 맵 요소를 추가하는 것을 고려해 봅시다.