【Adalo】GoogleマップとAPI連携をする際に必要なAPI Keyの取得と設定方法

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs株式会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

こんにちは!EPICs合同会社です!

今回はノーコードツール「Adalo」「GoogleマップとのAPI連携をする際に必要になるAPIkeyの取得方法」について解説をしたいと思います!

動画解説バージョンはこちら!

目次
無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

  • ノーコード開発会社の選び方
  • EPICsのノーコード受託開発の特徴
  • 支援実績・事例集

    氏名

    法人名

    メールアドレス

    電話番号

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

    実装イメージ

    実装手順

    以下の手順で実装します。

    1. AdaloのプロジェクトにMapを配置しドキュメントを開く
    2. Google Cloudでプロジェクトを作成
    3. API keyを生成し必要情報の有効化

    Mapを配置しドキュメントを開く

    すでに方法を知っている方であればドキュメントは不要かもしれませんが、今回は初めてAPI Keyを取得する方にもわかりやすいよう、Adaloのドキュメントも利用しながらAPI keyの取得方法をお伝えしようと思います!

    まずはGoogleMapと連系してMapを表示したいスクリーンにMapを配置しましょう!

    Mapを指定すると左側のメニューにAPI Keyの入力欄があり、そのすぐ下に「here」という表記があると思います。

    こちらをクリックしてドキュメントを開きましょう!

    該当のAdaloのドキュメントへの遷移

    ドキュメントを開いたら、「1) Setup your Google API Key」の項目に添付されている下記のURLから「Googleのドキュメント」を開きます。

    該当のGoogleのドキュメントへの遷移

    Googleのドキュメントを開いたら、少しスクロールしたところにある「認証情報ページに移動」のボタンを押して「Google Cloud」に移動します。

    Google Cloudでプロジェクトを作成

    Google Cloud」が開けたら「鍵と認証情報」の中のある「プロジェクト作成」をクリックして、プロジェクトを作ります。

    項目入力内容
    プロジェクト名どのアプリに使用しているプロジェクトか識別できるような名前をつけましょう
    組織本プロジェクトを紐づけたい先を指定してください。
    「組織なし」でもAPI Keyは取得できます
    場所該当の組織のフォルダを指定して下さい

    API keyを生成し必要情報の有効化

    プロジェクトが作成されると下記のような画面が立ち上がり、「①の部分にAPI Key」が表示されます。

    こちらをコピーします。※後ほどAdaloのMap部に入力するので、取り出せるよう保管しておきましょう。

    コピーができたら「GOOGLE MAPS PLATFORM」に移動します。

    次にAPIの保護設定を画面が出てきます。

    こちらは「後で」にしても問題はないですが、AdaloでのAPI連携に必要なもののみに利用制限をした場合は、

    「Select restriction type」「APIの制限」にし、下記の5つのAPIにチェックを入れましょう!

    • Maps SDK for Android
    • Geocoding API
    • Maps JavaScript API
    • Maps SDK for iOS
    • Places API

    上記の指定ができたら「キーを制限」をクリックしましょう!

    ここまで出来たら、再度Adaloのドキュメントに戻ります。

    「2) Ensure that your Google Account has the Google Geocoding API, Google Maps Javascript API, the Places API, an」の項目に1~5に記載されている各APIの有効化を行いましょう!

    1~5の項目それぞれにURLが添付されているので、そちらをクリックします。

    各URLをクリックすると下記の画像のような画面に飛びます。

    こちらの画面より該当のAPIが有効になっているか確認し、有効でなければ有効にします。

    その際上部のプロジェクト名もあっているか確認しましょう!

    最後にドキュメントの6番目の項目のリンクをクリックし、遷移先で「請求先アカウント」の設定をします。

    その際クレジットカードの登録などを求められますが、Googleアカウントには、APIの無料トライアル用の300ドルのクレジットが含まれているため、300ドルを超えるだけのAPIの利用がなければ請求されることはありません。

    また無料枠を超えそうな場合は通知が来るように設定することも可能です。

    もっと細かく料金などが知りたいという方はこちらの公式サイトを見てみてみてください!

    本記事を公開した2023年11月14日時点では無料枠内で28,500回まで地図の読み込みが無料と記載があったので、小規模から中規模程度のアプリであれば十分無料枠内で利用ができるでしょう!

    参照:https://mapsplatform.google.com/intl/ja/pricing/

    最後に先ほど取得したAPI KeyをAdaloのプロジェクト上に配置しているMapの部分に入力をしましょう!

    これでAdaloで作成したアプリとGoogleマップとのAPI連携は完了です!

    いかがでしたでしょうか?

    本記事が開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。

    【日本最大級のノーコード開発実績】
    無料でアプリ・システム開発の相談を受付中

      氏名

      法人名

      メールアドレス

      電話番号

      お問い合わせ詳細 ※分かる範囲でご記入ください

      送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

      「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
      目次