Bubble.io에서 실시간 맵을 만드는 것은 Google Maps를 사용하여 동적 맵 기능을 통합할 수 있도록 몇 가지 절차를 포함합니다. 아래는 실시간 맵을 개발하는 방법에 대한 단계별 안내입니다:
단계 1: 맵 요소 삽입
- Bubble.io 편집기에서 디자인 탭으로 이동합니다.
- '+' 아이콘을 클릭하여 페이지에 새로운 요소를 추가합니다.
- "맵" 요소로 스크롤하고, 클릭하여 페이지에 추가합니다.
단계 2: 맵 설정 구성
- 맵 요소가 선택되면 화면 왼쪽의 속성 편집기를 확인합니다.
- "마커 유형"을 선택합니다 - 마커 없음, 하나의 주소 마커 또는 여러 주소를 선택할 수 있습니다.
- "데이터 소스"에서 보여주려는 주소를 정의합니다. 이는 여러 마커를 표시하는 경우 지리적 주소 목록이어야 합니다.
- "주소 필드"에서, 동적 목록을 사용하는 경우 플롯하려는 주소가 포함된 필드를 선택합니다.
단계 3: 맵 모양을 사용자 정의
- "맵 유형"을 선택하여 로드맵, 위성, 하이브리드 또는 지형 보기 중 선택합니다.
- 드롭다운에서 "맵 스타일"을 선택하거나 JSON 객체를 사용하여 사용자 정의 스타일을 만듭니다.
- 원하는 경우, 기본 Google 아이콘 대신에 사용할 "사용자 정의 아이콘"을 업로드합니다.
단계 4: 사용자 상호작용 제어
- 사용자가 맵과 상호작용하길 원하는지에 따라 "확대/축소 및 드래깅 허용"을 전환합니다.
- 사용자가 맵 위를 스크롤할 때 맵이 확대되는 것을 방지하려면 "스크롤시 확대 비활성화"를 활성화합니다.
- 마커 목록이 있는 경우, "중심과 확대 수준 직접 설정"을 사용하여 맵의 중심점과 확대 수준을 지정할 수 있습니다.
단계 5: 실시간 기능 설정
- 맵이 실시간 변경 사항을 반영하게 하려면, 실시간 지리 위치의 데이터베이스와 같은 동적 데이터로 데이터 소스를 연결해야 합니다.
- 데이터베이스 업데이트가 맵의 변경을 트리거하는지, 데이터 변경에 반응하는 워크플로우를 설정함으로써 확인합니다.
단계 6: 마커 동작 구성
- 항상, 클릭시, 또는 전혀 보여주지 않을 마커에 표시할 제목을 설정합니다.
- "다른 창이 클릭될 때 자동으로 창 닫기"를 사용하여 맵에서 여러 정보 창이 어떻게 작동하는지 관리합니다.
단계 7: 맵 테스트
- 현재 설정으로 맵이 어떻게 작동하는지 확인하기 위해 미리보기 모드를 사용합니다.
- 데이터 소스에서 주소를 추가하거나 이동하거나 제거하여 맵이 실시간으로 업데이트되는지 확인합니다.
단계 8: 검토 및 게시
- 모든 설정을 검토하고 실시간 맵을 철저히 테스트합니다.
- 기능에 만족하면 작업을 저장하고 변경 사항을 배포하여 실시간 맵을 사용자에게 제공합니다.
이러한 단계를 따르면, 지리적 데이터의 변경을 동적으로 반영하는 Bubble.io에서 실시간 맵을 만들 수 있어야 합니다. 이는 응용 프로그램 사용자에게 대화형 경험을 제공합니다.
.png)
.png)
