こんにちは！EPICs株式会社の大熊です！
今回はAdaloで開発したアプリとGoogleマップを連携して、アプリ上から直接Googleマップを開く方法について解説をしていきます！
動画解説バージョンはこちら！
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装イメージ
アプリ内に表示されている住所やボタンなどを押すとデータベース側で設定している住所に連動してGoogleマップが開かれる。
では早速実装方法についても解説していきます！
実装方法
１.データベースの準備
まずはGoogleマップで開きたい住所情報をデータベースに加えていきましょう！
今回は「shop」というcollectionを作りその中に「address」というPROPERTYを作成します。
※今回のGoogleマップを開く実装ではデータは上記のみで構いませんが、nameなどはお好みで作成してください。
データ項目の準備が出来たら「Recode」をクリックして、今回使うデータを追加していきましょう！
次に「ADD SHOP」を押してデータの追加画面に移動します。
下記の画面より、住所などの情報を打ち込んで「SAVE」をしてください。
こちらでデータの準備は完了です！
２．要素の配置
今回は住所を記載したテキストを押すとGoogleマップが開くように設定したいので、Listとテキストを配置します。
Listはshopデータの情報を引っ張りたいので、「shop」を選択し、テキストはList内に配置をしましょう！
※「Googleマップ」を開くなどの文言も用意するとさらにわかりやすいと思うのでおすすめです。
３．テキストへのアクション設定
次にテキストにアクション設定を入れていきます。
設置したテキストを選択したら「ADD ACTION」→「Link」→「Website」の順に選択をしてください。
上記の選択をすると「External Link」という項目が表示されます。
こちらのWebsite URLの欄に「https://www.google.co.jp/maps/place/」と入力をします。
続いて直後にマジックテキストで住所データを設定しましょう。
→今回の場合は「current shop’s」→「address」
こちらで設定は以上です！
プレビューで住所テキストをクリックしたときにGoogleマップが開かれるか確認してみてください！
いかがでしたでしょうか？
無事Googleマップが開かれたことかと思います。
今回の記事が開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。
