📍
Map
MapエレメントとはGoogle Cloud Platformの登録APIキーの埋め込みピンを刺す場所を直接埋め込むピンを刺す場所をデータベース内のデータから表示させる場合ピンを複数の場所に刺す詳細情報現在地の表示マーカーの設定
2022/08/03
GPSによる現在地の表示ができるようになりました。
マーカーの画像を設定できるようになりました。
Mapエレメントとは
googleマップをアプリに埋め込み、任意の場所にピンを指すことが出来る。お店や観光スポットなどの場所を表示させたい時に使用する。
Google Cloud Platformの登録
Google Cloud Platformへの登録はこちら
Mapエレメントの利用には Google Map APIキー を取得する必要がある。APIキーの取得には、Google Cloud Platform に登録する。
必須事項を記入して登録を続ける。
無料トライアルに登録する。90日間もしくは、300$分のサービスを利用するまで無料で使用することが可能。
アカウント情報を入力する。この際にクレジットカードの登録を必要とするが、本人確認ための登録であり、ハードリミットのため、無料トライアル期間が過ぎても自動的にお金が引き落とされることはない。
登録を終えるとダッシュボードへ移動するので、左上のハンバーガーメニューを開き、「APIとサービス」からライブラリを選択する。
マップの「すべて表示」をクリックする
各マップのAPIを選択し、有効化する。
ハンバーガーメニューを開き、「APIとサービス > 認証情報」を選択する。
「+ 認証情報の作成」からAPIキーを選択する。
キーを作成したら「閉じる」ボタンをクリックし、APIキーの名前の変更を行う。
APIキーの埋め込み
マップエレメントを配置する。
Google Cloud Platformで作成したMapのAPIキーをコピーする。
Clickの開発画面に戻り、マップエレメントを選択し、右ウインドウ「マップ」タブにコピーしたAPIキーを貼り付ける。
ピンを刺す場所を直接埋め込む
ピンの場所を直接入力する方法とデータベースのデータを表示する方法がある。また、ピンを刺す場所は以下の3種類から選べる。
1)住所
2)建物や施設の名前
3)緯度、軽度
1)住所の場合
右ウインドウ「ピン」タブを開き、住所を入力する。
プレビューを開き、動作確認を行う。
2)建物名や施設名の場合
右ウインドウ「ピン」タブを開き、建物名や施設名を入力する。
プレビューを開き、動作確認を行う。
3)緯度・経度の場合
右ウインドウ「ピン」タブを開き、緯度・経度を入力する。
プレビューを開き、動作確認を行う。
ピンを刺す場所をデータベース内のデータから表示させる場合
データベースの画面へ移動し、新しくテーブルを作成する。
「Name」項目の名前を「スポット名」に変更する。
住所データを保存するための項目をテキストタイプで追加する。
キャンバスを開き、新規ページを作成する
新しく作成したページにベーシックリストを配置し、右ウインドウ「ベーシック」タブを開き、先ほど作成したテーブルを選択する。サブタイトル、サブタイトル2、左セクションのスイッチを切る。
「タイトル」タブを開き、カスタムテキストから「Current 東京観光スポット > スポット名」を選択する。
右ウインドウ「ClickFlow」から「リスト」タブを開き「+ ClickFlowの追加」から「ページ移動 > 新規ページ」を選択する。
新しく作成したページにマップエレメントを配置し、マップのAPIキーを埋め込む。
「ピン」タブを開き、カスタムテキストから「Current 東京観光スポット > 住所」を選択する。
プレビューを開き、動作確認を行う。
ピンを複数の場所に刺す
※ピンを複数刺す場合は、データベース内のデータを引用する必要があるため、データベースの作成が必要となる。
新規ページを作成し、マップエレメントを配置する。
配置したマップエレメントにAPIキーを貼り付ける。
マップエレメントを選択し、右ウインドウ「マップ」タブを開き、「ピンの数」を複数に変更する。
「データベースの選択」には先程作成したテーブル「東京観光スポット」を選択する。
「ピン」タブを開き、カスタムテキストから「Current 東京観光スポット > 住所」を選択する。
プレビューを開き、動作確認を行う。
詳細情報
「ピンの場所」をデータベースから引用している場合のみ、ピンをタップすることで施設や建物の名前、住所、電話番号、営業時間などを表示することが出来る。
データベースに移動し、作成したテーブルに項目を2つ追加する。「テキスト」タイプの項目名を「電話番号」とする。「画像」タイプの項目名を「写真」とする。
レコードを選択* し、電話番号と写真を追加する。
※チェックボックス以外にカーソルの照準を合わせクリックする。
「ピンの数」が複数設定になっているマップを選択し、右ウインドウ「ClickFlow」から「+ ClickFlowの追加」をクリックし「ページ移動 > 新規ページの作成」を選択する。
新規ページにそれぞれテキストエレメントと画像エレメントを配置する。
それぞれのエレメントを設定する。一番上のテキストはカスタムテキストから「Current 東京観光スポット > スポット名」を選択する。
右ウインドウ「スタイル」に移動し、テキストの配置場所や、太さ、サイズを変更する。
画像を選択し、右ウインドウ「画像ソース」に「データベース > Current 東京スポット > 写真」を選択する。
画像直下のテキストエレメントは「住所」と入力し、その下のテキストエレメントには、カスタムテキスト「Current 東京観光スポット > 住所」を選択する。
住所の下に配置したテキストエレメントは「電話番号」と入力し、その下のテキストエレメントにはカスタムテキストから「Current 東京観光スポット > 電話番号と設定する。
プレビューを開き、動作確認を行う
現在地の表示
「ピン」タブ内にあるこちらのスイッチをオンにすることでマップに現在地が表示されます。
マーカーの設定
マーカー（ピン）を好きな画像にアレンジすることができます。
「ピン」タブを開き「マーカーの設定」を ”カスタム” にします。
すると、画像ソースの項目が表示されますので任意のものを選択します。
今回はアップロードを選択して進めていきます。
指定された画像がピンの代わりに表示されるようになります。
