次の方法で共有

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

  • [アーティクル]

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

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

このクイックスタートでは Azure Maps Web SDK を使用しますが、Azure Maps サービスは、任意のマップ コントロールで使用できます。これには、Azure Maps チームがプラグインを作成したこれらの一般的なオープン ソース マップ コントロールなどが含まれます。

前提条件

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

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

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

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

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

  2. [サービスと Marketplace を検索] ボックスに「Azure Maps」と入力します。

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

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

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

    Screenshot showing the Create an Azure Maps Account resource page in the Azure portal.

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

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

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

Screenshot showing your Azure Maps subscription key in the Azure portal.

Note

このクイックスタートでは、デモンストレーションの目的で共有キー認証アプローチを使用しますが、どの運用環境でも推奨されるアプローチは [Microsoft Entra ID] 認証を使用することです。

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

  1. Interactive Search 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. 検索ボックスの下に表示された住所/場所のリストにマウスを合わせます。 対応するピンがマップに現れ、その場所に関する情報がポップアップに表示されることがわかります。 民間事業のプライバシー保護のために、架空の名前と住所が表示されています。

    Screenshot showing the interactive map search web application.

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

重要

「次のステップ」セクションに示されているチュートリアルでは、お使いのアカウントで Azure Maps を使用および構成する方法を詳しく説明しています。 チュートリアルに進む場合は、このクイック スタートで作成したリソースをクリーンアップしないでください。

チュートリアルに進まない場合は、次の手順に従ってリソースをクリーンアップしてください。

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

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

次のステップ

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

Azure Maps を使用して近くの目的地を検索する