地図

1) Google APIキーの設定

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

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

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を追加したりできます。 マーカーに画像が見つからない場合は、画像を追加することもできます。

4. マーカーに任意のアクションを追加することもできます。 たとえば、マーカーをクリックすると、そのレコードの詳細が記載された新しい画面にリンクしたり、詳細情報が表示されるボトムシートを開いたりすることができます。

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

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

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

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

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

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

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

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

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

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

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