1. クラスタリング機能とは？
地図に大量の地点データ（Marker）を表示したいとき、1つ1つのピンを表示すると画面がごちゃごちゃしてしまいます。クラスタリング機能を使えば、近くにあるMarkerをグループ化し、ズームインするにつれて個別のMarkerが見えるようにできます。
このブログを読むとできること
- Bubbleで「Google Maps Extended」プラグインを使い、地図上に大量のMarkerをクラスタリング表示できるようになります。
- 地図がスッキリ見やすくなり、パフォーマンスも向上します。
2. 前提条件
- 表示するデータがすでにある状態
例：地名や緯度・経度情報がデータベースに登録されている。
今回使用するデータは下記のとおりです。
緯度（北緯）経度（東経）がnumber型で登録されている必要があります。
- Bubbleの基本操作ができる
例：エレメントの設置、Workflowの設定。 - GoogleMAPとのAPI接続ができている
3. 通常のMAPでは不具合がある
Bubble標準の「Map」エレメントには以下の制限があります：
- 表示できるMarker数に上限がある
大量のMarkerを表示しようとすると、動作が重くなるか、正常に表示されないことがあります。 - Markerが多すぎて画面が見にくい
ピン同士が重なり、どこに何があるのかわかりにくくなります。
これを解決するのが「Google Maps Extended」プラグインです。
4. プラグインの紹介：Google Maps Extended
「Google Maps Extended」プラグインは、Google Mapsの高度な機能をBubbleに追加できる便利なツールです。クラスタリング表示をはじめ、標準のMapエレメントでは実現できない機能を利用できます。
主な特徴
- Markerのクラスタリング表示
- 経路表示
- ジオコーディング（住所⇄緯度・経度変換）
bubbleのプラグインページで「Maps Extended」と検索すれば上の方に表示されます。
インストールボタンを押下し、インストールしましょう
5. エレメントの設置
「Google Maps Extended」エレメントをページにドラッグ＆ドロップします。
エレメントの設定パネルで、以下の設定を行います：
- Center Location：ここでは現在位置を中心に表示したいため「Current geographic postion」を選択します。
6. Workflowの設定
Google Maps ExtendedでMAPにマーカーを表示させるためには、Workflowでデータベースからを対象のデータを読み込ませる必要があります。
トリガーの設定
Click here to add an event…のElementsから
「A Maps Extendet Map is redy」を選択します。
Element Actionsの設定
今回は複数の地図データをMap上に表示させたいので
Element Actionsの中から「Add Markars List a Maps Extended」を選択します。
「Add Markers」**アクションを追加し、取得したデータをマップに追加します。
設定方法
Ting:読み込む対象の型、今回なら対象のデータベース
List of Things：Do search for 対象のデータベース
Latiude：緯度データ（データベースに保存されているデータ※number型）
Longitude：経度データ（データベースに保存されているデータ※number型）
ID Field：unique id
この設定でとりあえずMAP上にマーカーを表示させることができます。
クラスタリングの設定
定ウィンドウを下までスクロールをすると
Cluster Markersの項目があり、これを「Yes」にします。
これで近接するマーカー同士をまとめて表示することができます。
7. よくあるトラブル
1. マーカーが重なって表示される
- Maps Extended Map is ready のトリガーは
Mapが読み込まれるたびに発動するので、ページが更新されると
Add Markers list MappsExtendedで同じデータが重複して読み込まれてしまいます。
これを避ける方法は２つ
1つめ「Allow duplicate markersのチェックをはずす」
このチェックを外すことで、重複した場所の表示を１つにまとめてくれます。
2つめ「Reset Map a Maps Extended」を使用する
Mapに追加されたマーカーをリセットするアクションです。
Add Markersの前に置くことで、地図が読み込まれるたびに必要なデータだけ読み込ませることができます。
８. まとめ
「Google Maps Extended」プラグインを使えば、Bubbleで大量のMarkerをクラスタリング表示し、地図を効率よく活用できます。標準マップの制限を超え、ユーザーにとって見やすく快適な地図表示を実現しましょう！
Google Maps Extendedには他にも便利な機能がたくさん！
- 経路表示：2点間のルートを表示するナビゲーション機能。
- ジオコーディング：住所から緯度・経度への変換、またはその逆を行う機能。
- カスタムスタイル：地図のデザインや配色を自由に変更。
- リアルタイム更新：データの変更に合わせて地図上のMarkerを動的に更新。
これらの機能を活用すれば、より高度な地図アプリやサービスが作成できます。ぜひ「Google Maps Extended」を試して、あなたのBubbleアプリをさらにパワーアップさせましょう！
次回はマーカーがクリックされたとき、詳細を表示する機能についての記事を書きたいと思います。
コメント