Quickstart: Create an interactive search map with Azure Maps
This article shows you how to use Azure Maps to create a map that gives users an interactive search experience. It walks you through these basic steps:
- Create your own Azure Maps account.
- Get your primary key to use in the demo web application.
- Download and open the demo map application.
This quickstart uses the Azure Maps Web SDK, however the Azure Maps services can be used with any map control. Here are some popular open-source map controls that the Azure Maps team has created plugin's for.
If you don't have an Azure subscription, create a free account before you begin.
Sign in to the Azure portal.
Create an Azure Maps account
Create a new Azure Maps account with the following steps:
In the upper left-hand corner of the Azure portal, click Create a resource.
In the Search the Marketplace box, type Azure Maps.
From the Results, select Azure Maps. Click Create button that appears below the map.
On the Create Maps Account page, enter the following values:
- The Subscription that you want to use for this account.
- The Resource group name for this account. You may choose to Create new or Use existing resource group.
- The Name of your new account.
- The Pricing tier for this account.
- Read the License and Privacy Statement, and check the checkbox to accept the terms.
- Click the Create button.
Get the primary key for your account
Once your Maps account is successfully created, retrieve the primary key that enables you to query the Maps APIs.
- Open your Maps account in the portal.
- In the settings section, select Authentication.
- Copy the Primary Key to your clipboard. Save it locally to use later in this tutorial.
If you use the subscription key instead of the primary key, your map won't render properly. Also, for security purposes, it is recommended that you rotate between your primary and secondary keys. To rotate keys, update your app to use the secondary key, deploy, then press the cycle/refresh button beside the primary key to generate a new primary key. The old primary key will be disabled. For more information on key rotation, see Set up Azure Key Vault with key rotation and auditing
Download the demo application
- Go to interactiveSearch.html. Copy the content of the file.
- Save the contents of this file locally as AzureMapDemo.html. Open it in a text editor.
- Search for the string
<Your Azure Maps Key>. Replace it with the Primary Key value from the preceding section.
Open the demo application
Open the file AzureMapDemo.html in a browser of your choice.
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.
Change the default center of the map. In the AzureMapDemo.html file, search for the variable named center. Replace the longitude, latitude pair value for this variable with the new values [-74.0060, 40.7128]. Save the file and refresh your browser.
Try out the interactive search experience. In the search box on the upper-left corner of the demo web application, search for restaurants.
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.
Clean up resources
The tutorials listed in the Next Steps section 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 to the tutorials, take these steps to clean up the resources:
- Close the browser that runs the AzureMapDemo.html web application.
- Navigate to the Azure portal page. Select All resources from the main portal page. Or, click on the menu icon in the upper left-hand corner. Select All resources.
- Click on your Azure Maps account. At the top of the page, click Delete.
For more code examples and an interactive coding experience, see these guides:
In this quickstart, you created your Azure Maps account and created a demo application. Take a look at the following tutorials to learn more about Azure Maps: