# 地図

{% tabs %}
{% tab title="詳細ガイド" %}
**1) Google APIキーの設定**

Google Maps APIキーを取得するためにGoogleがここで概説している手順に従ってください：<https://developers.google.com/maps/documentation/javascript/get-api-key>

次に、Google APIキーをコピーして、Adaloのマップコンポーネントの左パネルに貼り付けます

![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-2176a814c062ef9ed05b7eb4fa24f4ef4acd82d1%2FScreenshot%202020-03-13%20at%204.17.17%20PM.png?alt=media)

**2) GoogleアカウントにGoogle Geocoding API、Google Maps Javascript API、Places API、およびMaps SDK for iOSが有効になっていることを確認**

1. <https://console.cloud.google.com/apis/library/maps-backend.googleapis.com> にアクセスして、Enableボタンをクリックします
2. <https://console.cloud.google.com/apis/library/geocoding-backend.googleapis.com> にアクセスして、Enableボタンをクリックします
3. <https://console.cloud.google.com/apis/library/maps-ios-backend.googleapis.com> にアクセスして、Enableボタンをクリックします
4. <https://console.cloud.google.com/apis/library/maps-android-backend.googleapis.com> にアクセスして、Enableボタンをクリックします
5. <https://console.cloud.google.com/apis/library/places-backend.googleapis.com> にアクセスして、Enableボタンをクリックします
6. <https://console.cloud.google.com/billing/linkedaccount> にアクセスして、Link Billing accountをクリックします。 Googleアカウントには、APIの無料トライアルのための$300のクレジットが含まれており、あなたの許可なしにカードに請求されることはありませんが、Googleは無料トライアルにアクセスするためにクレジットカードの登録が必要です。

**3) マーカーの数を選択し、複数のマーカーの場合は設定を構成します**

1. マップが単一のマーカーを表示するか複数のマーカーを表示するかを選択します。複数のマーカーを選択した場合は...
2. マーカーのリストを表示するコレクションを選択します。
3. そのコレクション内のどのレコードをマーカーとして表示するかをフィルタリングすることを選択することもできます。
4. アイテムの最大数やソートも設定できます。たとえば、トップ10のレコードに対してa-zでソートされたマーカーのみを表示するように選択できます。

**4) マーカーの住所とアクションを設定する**

1. 次に、左パネルのマーカーセクションを展開します。
2. 各マーカーの住所をマジックテキストを使用して設定します。1つまたは複数のマジックテキストプロパティを使用してこれを行うことができます。ビルダーでは正しい住所を持つマーカーは表示されませんが、プレビュー、共有、またはアプリを公開するときには表示されます。
3. 「マーカー」オプションをクリックし、マーカーソースをデフォルトからカスタムに変更することで、マーカーのスタイルを変更できます。その後、「マーカー画像」で画像を提出したり、コレクションから選択したり、URLを追加したりできます。 マーカーに画像が見つからない場合は、画像を追加することもできます。 ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-a5a38ce13f5f164b95c99760855f3990bddc37fa%2Fimage%20\(59\).png?alt=media)
4. マーカーに任意のアクションを追加することもできます。 たとえば、マーカーをクリックすると、そのレコードの詳細が記載された新しい画面にリンクしたり、詳細情報が表示されるボトムシートを開いたりすることができます。

![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-f436387a945bb23a12aef64914fffa0db3ae8758%2FMaps%20Test.gif?alt=media)

**5) マップスタイルをカスタマイズする**

道路地図、ハイブリッド、衛星、地形のいずれかのマップスタイルオプションを選択してください

![Roadmap](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-665334706249d87836be44f7c9cb9e76e814068c%2FScreenshot%202020-03-16%20at%2012.52.13%20PM.png?alt=media)

![Hybrid](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-863ded43362a3e65f58efd39c1db2f6316ad7222%2FScreenshot%202020-03-16%20at%2012.52.24%20PM.png?alt=media)

![Satellite](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-17481daa92742455bc2c0a3b2bed470f8a8c5e92%2FScreenshot%202020-03-16%20at%2012.52.38%20PM.png?alt=media)

![Terrain](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-328b76bafbac163d0fbb154d2ea2cb300e56c52b%2FScreenshot%202020-03-16%20at%2012.52.51%20PM.png?alt=media)

**JSONを使用したマップのカスタマイズ**

マップのスタイルをさらに制御したい場合は、カスタムJSONを追加できます。 独自のJSONコードを書くのが不安な場合は心配いりません！ Google Maps Styling Wizardを使用して独自のマップスタイルを作成できます。 ウィザードは、JSONを自動的に生成し、それをAdaloにコピーして貼り付けることができます。

1\) <https://mapstyle.withgoogle.com/> にアクセスします

2\) スタイルを作成するをクリックします

![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-254568e7399c05dc66fd2bdb7b8fd11d300dfad4%2FScreenshot%202020-03-09%20at%2012.06.20%20PM.png?alt=media)

3\) スタイルをカスタマイズします

![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-0f50ae8b51693b8b743f3f17fba2af27a09ea7f6%2FStyling%20Wizard_%20Google%20Maps%20APIs%20\(2\).gif?alt=media)

4\) 完了をクリックします

![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-ec3306de4e24be58206e655d2df22ccddaa5ab7d%2FScreenshot%202020-03-09%20at%2012.06.39%20PM.png?alt=media)

5\) JSONをコピーをクリックします

![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-060dad73fe40d6e80c23c5c91ffb832ed39b2dbf%2FScreenshot%202020-03-09%20at%2012.07.10%20PM.png?alt=media)

6\) JSONをAdaloに貼り付けます

![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-6da34a7686d11d225249205b292c7cd798d151f9%2FScreenshot%202020-03-09%20at%2012.09.40%20PM.png?alt=media)

7\) カスタムスタイルを確認するためにアプリをプレビューします！ 注意：ビルダーではカスタムスタイルは表示されませんが、アプリのプレビュー、共有リンク、そしてもちろん、公開されたアプリで確認できます。
{% endtab %}
{% endtabs %}

## マップのトラブルシューティング

* マップが画面が再レンダリングされるまで読み込まれない問題がある場合は、GETエンドポイントが正しく設定されているかどうかを確認してください。 これは通常、GETエンドポイントの不完全な設定または欠落によるものです。

## ヘルプ

この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！ 投稿にこの記事へのリンクを貼り付けることも忘れずに！