Azure Maps を使用して対話形式の検索マップを作成するCreate an interactive search map by using Azure Maps

この記事では、対話形式で検索を行える、Azure Maps のマップ作成機能について説明します。This article demonstrates the capabilities of Azure Maps to create a map that gives users an interactive search experience. 次の基本的な手順について説明します。It walks you through these basic steps:

  • 自分用の Azure Maps アカウントを作成する。Create your own Azure Maps account.
  • デモ版の Web アプリケーションで使用するアカウント キーを取得する。Get your account key to use in the demo web application.

Azure サブスクリプションをお持ちでない場合は、開始する前に 無料アカウント を作成してください。If you don't have an Azure subscription, create a free account before you begin.

Azure portal にサインインしますSign in to the Azure portal

Azure Portal にサインインします。Sign in to the Azure portal.

アカウントを作成し、キーを取得するCreate an account and get your key

  1. Azure portal の左上隅にある [リソースの作成] を選択します。In the upper-left corner of the Azure portal, select Create a resource.

  2. [Marketplace を検索] ボックスに「Maps」と入力します。In the Search the Marketplace box, enter Maps.

  3. [結果] から [Maps] を選択します。From the Results, select Maps. マップの下に表示される [作成] ボタンを選択します。Select the Create button that appears below the map.

  4. [Azure Maps アカウントの作成] ページで、次の値を入力します。On the Create Azure Maps Account page, enter the following values:

    • 新しいアカウントの "名前"。The Name of your new account.

    • このアカウントで使う "サブスクリプション"。The Subscription that you want to use for this account.

    • このアカウントの "リソース グループ" です。The Resource group for this account. [新規作成] を選んで新しく作成することも、[既存のものを使用] を選んで既存のリソース グループを使うこともできます。You might choose to Create new or Use existing resource group.

    • 任意の [価格レベル] を選択します。Select the Pricing Tier of your choice.

    • ライセンスプライバシーに関する声明を読みます。Read the License and Privacy Statement. チェックボックスをオンにして利用規約に同意します。Select the check box to accept the terms.

    • 最後に [作成] ボタンを選択します。Finally, select the Create button.

      ポータルで Azure Maps アカウントを作成する

  5. アカウントが正常に作成されたら、アカウントを開いて、アカウント メニューの [設定] セクションに移動します。After your account is successfully created, open it and find the settings section of the account menu. [キー] を選択して Azure Maps アカウントのプライマリおよびセカンダリ キーを表示します。Select Keys to view the primary and secondary keys for your Azure Maps account. 次のセクションで使用する [主キー] の値をローカルのクリップボードにコピーします。Copy the Primary Key value to your local clipboard to use in the following section.

アプリケーションのダウンロードDownload the application

  1. interactiveSearch.html ファイルの内容をコピーまたはダウンロードします。Download or copy the contents of the file interactiveSearch.html.
  2. このファイルの内容を AzureMapDemo.html としてローカルに保存します。Save the contents of this file locally as AzureMapDemo.html. それをテキスト エディターで開きます。Open it in a text editor.
  3. <Your Azure Maps Key> という文字列を検索します。Search for the string <Your Azure Maps Key>. これを前のセクションで取得した主キーの値に置き換えます。Replace it with the Primary Key value from the preceding section.

アプリケーションを開くOpen the application

  1. AzureMapDemo.html ファイルを任意のブラウザーで開きます。Open the file AzureMapDemo.html in a browser of your choice.

  2. 表示されたロサンゼルス市の地図を見てください。Observe the map shown of the City of Los Angeles. 拡大/縮小すると、ズームのレベルに応じて、マップに表示される情報が自動的に増減します。Zoom in and out to see how the map automatically renders with more or less information depending on the zoom level.

  3. マップの既定の中心を変更します。Change the default center of the map. AzureMapDemo.html ファイルで center という名前の変数を検索します。In the AzureMapDemo.html file, search for the variable named center. この変数の緯度と経度のペア値を、新しい値 [-74.0060, 40.7128] に置き換えます。Replace the longitude, latitude pair value for this variable with the new values [-74.0060, 40.7128]. ファイルを保存し、ブラウザーを更新します。Save the file and refresh your browser.

  4. これで、対話形式の検索を実行できます。Try out the interactive search experience. デモ版の Web アプリケーションの左上隅にある検索ボックスに「レストラン」と入力します。In the search box on the upper-left corner of the demo web application, search for restaurants.

  5. 検索ボックスの下に表示された住所/場所のリストにマウスを合わせます。Move your mouse over the list of addresses and locations that appear below the search box. 対応するピンがマップに現れ、その場所に関する情報がポップアップに表示されることがわかります。Notice how the corresponding pin on the map pops out information about that location. 民間事業のプライバシー保護のために、架空の名前と住所が表示されています。For privacy of private businesses, fictitious names and addresses are shown.

    対話型の検索 Web アプリケーション

リソースのクリーンアップClean up resources

チュートリアルでは、お使いのアカウントで Azure Maps を使用および構成する方法について詳しく説明します。The tutorials detail how to use and configure Azure Maps with your account. チュートリアルに進む場合は、このクイック スタートで作成したリソースをクリーンアップしないでください。Don't clean up the resources created in this quickstart if you plan to continue to the tutorials. 進まない場合は、次の手順に従ってリソースをクリーンアップしてください。If you don't plan to continue, take these steps to clean up the resources:

  1. AzureMapDemo.html Web アプリケーションを実行しているブラウザーを閉じます。Close the browser that runs the AzureMapDemo.html web application.
  2. Azure portal の左側のメニューから、[すべてのリソース] を選択します。From the left menu in the Azure portal, select All resources. 次に、Azure Maps アカウントを選択します。Then select your Azure Maps account. [すべてのリソース] ブレードの上部にある [削除] を選択します。At the top of the All resources blade, select Delete.

次の手順Next steps

このクイック スタートでは、Azure Maps アカウントを作成し、デモ アプリを作成しました。In this quickstart, you created your Azure Maps account and created a demo app. Azure Maps の詳細については、以下のチュートリアルを参照してください。Take a look at the following tutorials to learn about Azure Maps:

他のコード例や対話型のコーディング エクスペリエンスについては、以下のガイドを参照してください。For more code examples and an interactive coding experience, see these guides: