クイック スタート: Azure Maps を使用して対話型の検索マップを作成する

このクイック スタートでは、Azure Maps を使用して、ユーザーに対話型の検索エクスペリエンスを提供するマップを作成する方法について説明します。 次の基本的な手順について説明します。

• 独自の Azure Maps アカウントを作成します。
• デモ Web アプリケーションで使用する Azure Maps サブスクリプション キーを取得します。
• デモ マップ アプリケーションをダウンロードして開きます。

Prerequisites

• Azure サブスクリプションをお持ちでない場合は、開始する前に 無料アカウント を作成してください。

• Azure portal にサインインします。

Azure Maps アカウントを作成する

次の手順で新しい Azure Maps アカウントを作成します。

1. Azure portal の左上隅にある [リソースの作成] を選択します。

2. [Search Services and Marketplace] ボックスに「Azure Maps」と入力します。

3. 表示されるドロップダウン リストで [Azure Maps ] を選択し、[ 作成 ] ボタンを選択します。

4. [ Azure Maps アカウント リソースの作成] ページで、次の値を入力し、[ 作成 ] ボタンを選択します。

   • このアカウントに使用する サブスクリプション 。
   • このアカウントの リソース グループ 名。 [ 新規作成 ] または [ 既存のリソース グループの選択] を選択 できます。
   • 新しい Azure Maps アカウントの 名前 。
   • このアカウントの 価格レベル 。 [Gen2] を選択します。
   • ライセンスとプライバシーに関する声明を読み、チェックボックスをオンにして条項に同意します。

   

アカウントのサブスクリプション キーを取得する

Azure Maps アカウントが正常に作成されたら、Maps API のクエリを実行できるサブスクリプション キーを取得します。

1. ポータルで Maps アカウントを開きます。
2. [設定] セクションで、[ 認証] を選択します。
3. このチュートリアルの後半で使用するために、 主キー をコピーしてローカルに保存します。

Azure Maps デモをダウンロードして更新する

1. ファイルの内容をコピーします。 対話型検索 Quickstart.html。
2. このファイルの内容を AzureMapDemo.htmlとしてローカルに保存します。 テキスト エディターで開きます。
3. 前のセクションで取得した 主キー の値を追加します
   1. authOptions関数のすべてのコードをコメント アウトします。このコードは Microsoft Entra 認証に使用されます。
   2. authOptions関数の最後の 2 行のコメントを解除します。このコードは、このクイックスタートで使用されている方法である共有キー認証に使用されます。
   3. <Your Azure Maps Key>を前のセクションのサブスクリプション キーの値に置き換えます。

デモ アプリケーションを開く

1. 任意のブラウザーでファイル AzureMapDemo.html を開きます。

2. ロサンゼルス市の地図を観察してください。 拡大/縮小して、ズーム レベルに応じて多かれ少なかれ情報を使用してマップがどのように自動的にレンダリングされるかを確認します。

3. マップの既定の中心を変更します。 AzureMapDemo.html ファイルで、center という名前の変数を検索します。 この変数の経度と緯度のペア値を新しい値 [-74.0060, 40.7128] に置き換えます。 ファイルを保存し、ブラウザーを更新します。

4. 対話型の検索エクスペリエンスを試してみてください。 デモ Web アプリケーションの左上隅にある検索ボックスで、 レストランを検索します。

5. 検索ボックスの下に表示される住所と場所の一覧の上にマウスを移動します。 マップ上の対応するピンによって、その場所に関する情報がどのようにポップアップ表示されるかに注目してください。 プライベート企業のプライバシーのために、架空の名前と住所が表示されます。

   

リソースをクリーンアップする

チュートリアルに進む予定がない場合は、次の手順を実行してリソースをクリーンアップします。

1. AzureMapDemo.htmlWeb アプリケーションを実行するブラウザー を 閉じます。
2. Azure Portal に移動します。 メイン ポータル ページから [すべてのリソース ] を選択するか、左上隅にあるメニュー アイコンを選択し、[ すべてのリソース] を選択します。
3. Azure Maps アカウントを選択し、ページの上部にある [削除 ] を選択します。

その他のコード例と対話型のコーディング エクスペリエンスについては、次の記事を参照してください。

• Azure Maps Search サービスを使用してアドレスを検索する
• Azure Maps のマップ コントロールを使用する

次のステップ

このクイック スタートでは、Azure Maps アカウントとデモ アプリケーションを作成しました。 Azure Maps の詳細については、次のチュートリアルを参照してください。