Démarrage rapide : Créer une carte de recherche interactive avec Azure MapsQuickstart: Create an interactive search map by using Azure Maps

Cet article décrit les fonctionnalités d’Azure Maps qui consistent à créer une carte offrant aux utilisateurs une expérience de recherche interactive.This article demonstrates the capabilities of Azure Maps to create a map that gives users an interactive search experience. Il vous guide pas à pas durant ces étapes de base :It walks you through these basic steps:

  • Créer votre propre compte Azure Maps.Create your own Azure Maps account.
  • Obtenir votre clé de compte à utiliser dans l’application web de démonstration.Get your account key to use in the demo web application.

Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.If you don't have an Azure subscription, create a free account before you begin.

Connectez-vous au portail Azure.Sign in to the Azure portal

Connectez-vous au portail Azure.Sign in to the Azure portal.

Créer un compte avec Azure MapsCreate an account with Azure Maps

Créez un compte Maps en suivant la procédure suivante :Create a new Maps account with the following steps:

  1. En haut à gauche du portail Azure, cliquez sur Créer une ressource.In the upper left-hand corner of the Azure portal, click Create a resource.
  2. Dans la zone Rechercher sur la Place de marché, tapez Maps.In the Search the Marketplace box, type Maps.
  3. Dans les Résultats, sélectionnez Maps.From the Results, select Maps. Cliquez sur le bouton Créer qui s’affiche sous la carte.Click Create button that appears below the map.
  4. Sur la page Créer un compte Maps, entrez les valeurs suivantes :On the Create Maps Account page, enter the following values:
    • L’Abonnement à utiliser pour ce compte.The Subscription that you want to use for this account.
    • Le Groupe de ressources pour ce compte.The Resource group name for this account. Vous pouvez choisir de Créer ou d’utiliser un groupe de ressources Existant.You may choose to Create new or Use existing resource group.
    • Le Nom de votre nouveau compte.The Name of your new account.
    • Le niveau tarifaire pour ce compte.The Pricing tier for this account.
    • Lisez la Licence et la Déclaration de confidentialité, puis cochez la case pour accepter les conditions.Read the License and Privacy Statement, and check the checkbox to accept the terms.
    • Cliquez sur le bouton Créer.Click the Create button.

Créer un compte Maps sur le Portail

Obtenir la clé primaire de votre compteGet the primary key for your account

Une fois le compte Maps créé, récupérez la clé qui vous permet d’interroger les API Maps.Once your Maps account is successfully created, retrieve the key that enables you to query the Maps APIs. Nous vous recommandons d’utiliser la clé primaire de votre compte comme clé d’abonnement lors de l’appel de services Azure Maps.We recommend using your account's primary key as the subscription key when calling Azure Maps services.

  1. Ouvrez votre compte Maps dans le portail.Open your Maps account in the portal.
  2. Dans la section des paramètres, sélectionnez Authentification.In the settings section, select Authentication.
  3. Copiez la Clé primaire dans le Presse-papiers.Copy the Primary Key to your clipboard. Enregistrez-la localement, vous l’utiliserez plus tard dans ce didacticiel.Save it locally to use later in this tutorial.

Obtenir la clé primaire Azure Maps dans le portail Azure

Télécharger l’applicationDownload the application

  1. Accédez à interactiveSearch.html et cliquez sur celui-ci pour en afficher le contenu dans l’interface utilisateur de GitHub.Go to interactiveSearch.html and click it to view the contents within the GitHub User Interface. Cliquez avec le bouton droit sur le bouton Brut, et copiez le contenu du fichier ou utilisez « Enregistrer sous » pour télécharger le fichier.Right click on the Raw button and copy the content of the file or 'Save as' to download the file.
  2. Enregistrez le contenu de ce fichier localement sous le nom AzureMapDemo.html.Save the contents of this file locally as AzureMapDemo.html. Ouvrez le fichier dans un éditeur de texte.Open it in a text editor.
  3. Recherchez la chaîne <Your Azure Maps Key>.Search for the string <Your Azure Maps Key>. Remplacez-la par la valeur de clé primaire obtenue dans la section précédente.Replace it with the Primary Key value from the preceding section.

Ouvrir l’applicationOpen the application

  1. Ouvrez le fichier AzureMapDemo.html dans le navigateur de votre choix.Open the file AzureMapDemo.html in a browser of your choice.

  2. Observez la carte de la ville de Los Angeles.Observe the map shown of the City of Los Angeles. Effectuez un zoom avant et arrière : la carte affiche automatiquement plus ou moins d’informations selon le niveau de zoom.Zoom in and out to see how the map automatically renders with more or less information depending on the zoom level.

  3. Modifiez le centre par défaut de la carte.Change the default center of the map. Dans le fichier AzureMapDemo.html, recherchez la variable nommée center.In the AzureMapDemo.html file, search for the variable named center. Remplacez la paire de valeurs longitude, latitude de cette variable par les nouvelles valeurs : [-74.0060, 40.7128] .Replace the longitude, latitude pair value for this variable with the new values [-74.0060, 40.7128]. Enregistrez le fichier et actualisez votre navigateur.Save the file and refresh your browser.

  4. Testez l’expérience de recherche interactive.Try out the interactive search experience. Dans la zone de recherche en haut à gauche de l’application web de démonstration, recherchez restaurants.In the search box on the upper-left corner of the demo web application, search for restaurants.

  5. Déplacez votre souris sur la liste des adresses et emplacements qui s’affichent sous la zone de recherche.Move your mouse over the list of addresses and locations that appear below the search box. Le repère correspondant sur la carte affiche des informations à propos de cet emplacement.Notice how the corresponding pin on the map pops out information about that location. Pour des raisons de confidentialité des entreprises privées, des adresses et des noms fictifs sont présentés.For privacy of private businesses, fictitious names and addresses are shown.

    Application web de recherche interactive sur une carte

Nettoyer les ressourcesClean up resources

Les tutoriels expliquent en détail comment utiliser et configurer Azure Maps avec votre compte.The tutorials detail how to use and configure Azure Maps with your account. Si vous souhaitez suivre les tutoriels, ne nettoyez pas les ressources créées dans ce guide de démarrage rapide.Don't clean up the resources created in this quickstart if you plan to continue to the tutorials. Sinon, effectuez ces étapes pour nettoyer les ressources :If you don't plan to continue, take these steps to clean up the resources:

  1. Fermez le navigateur qui exécute l’application web AzureMapDemo.html.Close the browser that runs the AzureMapDemo.html web application.
  2. Dans le menu de gauche du portail Azure, sélectionnez Toutes les ressources.From the left menu in the Azure portal, select All resources. Sélectionnez ensuite votre compte Azure Maps.Then select your Azure Maps account. En haut du panneau Toutes les ressources, sélectionnez Supprimer.At the top of the All resources blade, select Delete.

Étapes suivantesNext steps

Dans ce guide de démarrage rapide, vous avez créé votre compte Azure Maps ainsi qu’une application de démonstration.In this quickstart, you created your Azure Maps account and created a demo app. Pour en savoir plus sur Azure Maps, consultez les tutoriels suivants :Take a look at the following tutorials to learn about Azure Maps:

Pour obtenir d’autres exemples de code et bénéficier d’une expérience de codage interactive, consultez ces guides :For more code examples and an interactive coding experience, see these guides: