MENU
資料ダウンロード
今すぐ相談する
  1. ホーム
  2. Adalo
  3. 【Adalo】GoogleマップとAPI連携をする際に必要なAPI Keyの取得と設定方法

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

Koki Okuma

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

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

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

また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

  • 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
  • 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
  • リリース後の改修スピードも早い → PDCAを早く回せる

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

ノーコード開発サービスについて詳しく知る
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連携は完了です！

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

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

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

    氏名

    法人名

    メールアドレス

    日中繋がりやすい電話番号

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

    フォームの送信によりGoogleのプライバシーポリシーと利用規約に同意したものとみなされます。

    日本最大級のノーコード開発実績！アプリ・システム開発サービス
    サービス概要を見る
    Adalo
    Adalo API APIKey Googleマップ アプリ開発 テクニカル ノーコード
    「勉強になった！」「役に立った！」と思っていただけたら、是非シェアもお願いします！
    ノーコード開発ツールを使ったアプリ・システム開発にお困りですか？
    1からの開発も、途中からの開発も、お気軽にEPICsにご相談ください！
    今すぐ無料で相談する
    著者・監修者
    大熊滉希
    日本最大級のノーコード開発実績を誇るEPICs株式会社の代表。株式会社DRAFT役員として新規事業のコンサルティングに従事した後、EPICsを創業。ノーコード開発の顧問として上場企業に支援も行っている。
    開発実績一覧
    監修者
    石森裕也
    EPICs株式会社CTO。サイバーエージェントのグループ会社での経験を経てEPICsに参画した。これまでで100件以上のノーコード開発に従事。開発経験は10年。
    目次