Créer une carte de recherche interactive avec Azure MapsCreate 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 et obtenir une cléCreate an account and get your key

  1. En haut à gauche du portail Azure, sélectionnez Créer une ressource.In the upper-left corner of the Azure portal, select Create a resource.

  2. Dans la zone Rechercher sur la Place de marché, entrez Maps.In the Search the Marketplace box, enter Maps.

  3. Dans les Résultats, sélectionnez Maps.From the Results, select Maps. Sélectionnez le bouton Créer situé sous la carte.Select the Create button that appears below the map.

  4. Dans la page Créer un compte Azure Maps, entrez les valeurs suivantes :On the Create Azure Maps Account page, enter the following values:

    • Le Nom de votre nouveau compte.The Name of your new account.

    • L’Abonnement à utiliser pour ce compte.The Subscription that you want to use for this account.

    • Le Groupe de ressources de ce compte.The Resource group for this account. Vous pouvez choisir de créer ou d’utiliser un groupe de ressources Existant.You might choose to Create new or Use existing resource group.

    • Sélectionnez le Niveau tarifaire de votre choix.Select the Pricing Tier of your choice.

    • Prenez connaissance de la licence et de la déclaration de confidentialité.Read the License and Privacy Statement. Cochez la case pour accepter les conditions.Select the check box to accept the terms.

    • Enfin, sélectionnez le bouton Créer.Finally, select the Create button.

      Créer un compte Azure Maps dans le portail

  5. Après avoir créé votre compte, ouvrez le compte et accédez à la section Paramètres dans le menu Compte.After your account is successfully created, open it and find the settings section of the account menu. Sélectionnez Clés pour afficher les clés primaire et secondaire de votre compte Azure Maps.Select Keys to view the primary and secondary keys for your Azure Maps account. Copiez la valeur de la Clé primaire dans le Presse-papiers local afin de pouvoir l’utiliser dans la section suivante.Copy the Primary Key value to your local clipboard to use in the following section.

Télécharger l’applicationDownload the application

  1. Téléchargez ou copiez le contenu du fichier interactiveSearch.html.Download or copy the contents of the file interactiveSearch.html.
  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

Supprimer des 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: