Placez une carte interactive ou un panorama Street View sur votre page Web à l'aide d'une requête HTTP, sans code JavaScript personnalisé.
Coûts
Toutes les requêtes API Maps Embed sont sans frais et ont une utilisation illimitée. Toutefois, toutes les requêtes nécessitent toujours une clé API Google Cloud valide. Pour en savoir plus, consultez Utilisation et facturation.
Avant de commencer
Pour créer une carte intégrée sur votre page Web, suivez les étapes de configuration requises ci-dessous :
Étape 1 : Configurez votre projet
Console
-
Dans la console Google Cloud, sur la page de sélection du projet, cliquez sur Créer un projet pour commencer à créer un projet Cloud.
-
Assurez-vous que la facturation est activée pour votre projet Cloud. Vérifier si la facturation est activée sur un projet
Vous pouvez tester Google Cloud sans frais. La période d'essai expire au bout de 90 jours ou après que le compte a enregistré 300 $ de frais (selon la première échéance atteinte). Vous pouvez résilier à tout moment. Pour en savoir plus, consultez Crédits de compte de facturation et Facturation.
SDK Cloud
gcloud projects create "PROJECT"
En savoir plus sur le SDK Google Cloud, l'installation du SDK Cloud et les commandes suivantes :
Étape 2 : Activez les API ou les SDK
Pour utiliser Google Maps Platform, vous devez activer les API ou les SDK que vous prévoyez d'utiliser avec votre projet.
Console
SDK Cloud
gcloud services enable \ --project "PROJECT" \ "maps-embed-backend.googleapis.com"
En savoir plus sur le SDK Google Cloud, l'installation du SDK Cloud et les commandes suivantes :
Étape 3 : Obtenez une clé API
Cette étape concerne uniquement le processus de création de la clé API. Si vous utilisez votre clé API en production, nous vous recommandons vivement de la restreindre. Vous trouverez plus d'informations sur la page Utiliser des clés API spécifique au produit.
Une clé API est un identifiant unique qui permet d'authentifier les requêtes associées à votre projet à des fins d'utilisation et de facturation. Vous devez associer au moins une clé API à votre projet. Pour créer une clé ou ajouter une API ou un SDK à une clé existante, suivez ces instructions.
Console
-
Accédez à la page Google Maps Platform > Clés et identifiants.
- Si vous y êtes invité, sélectionnez votre projet.
-
Effectuez l'une des opérations suivantes :
-
Créer une clé :
- Cliquez sur Créer des identifiants > Clé API.
- Dans le panneau Créer une clé API, ouvrez la liste Sélectionner des restrictions d'API.
- Effacez toutes les API dont cette clé n'a pas besoin et assurez-vous que l'API Maps Embed reste sélectionnée.
- Cliquez sur Créer. Le panneau affiche votre nouvelle clé API.
-
Utiliser une clé existante :
- Cliquez sur le nom de la clé.
- Dans la liste Sélectionner des restrictions d'API, sélectionnez API Maps Embed.
- Cliquez sur Enregistrer.
La sélection d'une API ici ne l'active pas. Assurez-vous que l'API Maps Embed est activée sur la page Bibliothèque d'API.
-
- Pour afficher la chaîne de clé ultérieurement, accédez à la page Clés et identifiants, puis cliquez sur Afficher la clé pour la clé.
Si la console ne correspond pas à ces étapes, consultez Créer une clé API et Ajouter des restrictions d'API dans la documentation Google Cloud.
SDK Cloud
Remplacez PROJECT_ID par l'ID de votre projet dans les commandes suivantes.
-
Créer une clé : exécutez la commande suivante et remplacez DISPLAY_NAME par le nom de la clé.
gcloud services api-keys create \ --project="PROJECT_ID" \ --display-name="DISPLAY_NAME" \ --api-target=service=maps-embed-backend.googleapis.com
En savoir plus sur le SDK Google Cloud, l'installation du SDK Cloud et les commandes suivantes :
-
Utiliser une clé existante : exécutez la commande suivante et remplacez KEY_ID par l'ID de la clé. L'option
--appendconserve les API que la clé autorise déjà. Sans cela, la commande les remplace.gcloud services api-keys update KEY_ID \ --project="PROJECT_ID" \ --append \ --api-target=service=maps-embed-backend.googleapis.com
En savoir plus sur le SDK Google Cloud, l'installation du SDK Cloud et les commandes suivantes :
L'ID de clé n'est pas la chaîne de clé ni le nom à afficher. Pour le trouver, exécutez
gcloud services api-keys list --project="PROJECT_ID". L'ID correspond à la dernière partie du champname:projects/PROJECT_NUMBER/locations/global/keys/KEY_ID.
Pour afficher la chaîne de clé, exécutez gcloud services api-keys get-key-string KEY_ID
--project="PROJECT_ID".
Générer un iFrame
Cliquez sur les options suivantes, puis ajoutez un lieu et une clé API pour générer un iFrame pour votre page Web. Pour en savoir plus sur les paramètres et options supplémentaires, consultez Intégrer une carte.
Tester votre iFrame
Pour afficher votre iFrame dans une fenêtre de navigateur HTML :
- Ouvrez votre éditeur de texte par défaut. Des éditeurs de texte tels que TextEdit ou Microsoft Windows Notepad devraient être installés par défaut sur votre appareil.
- Créez un fichier HTML et nommez-le
index.html. Ajoutez le code suivant avec l'iframe que vous avez généré ci-dessus :
<html> <!-- Replace this code comment with your iframe. --> </html>Enregistrez votre fichier HTML
index.html.Chargez le fichier HTML dans un navigateur Web en le faisant glisser depuis le Bureau vers votre navigateur. Dans la plupart des systèmes d'exploitation, vous pouvez également double-cliquer dessus.
Félicitations ! Vous venez de configurer et de créer une carte à l'aide de l'API Maps Embed.
Nettoyer
Vous pouvez supprimer votre projet Google Cloud. La facturation de toutes les ressources qu'il utilise sera ainsi interrompue.
- Dans la console Google Cloud, accédez à la page Gérer les ressources.
- Si le projet que vous envisagez de supprimer est associé à une organisation, sélectionnez et développez la liste des organisations en haut de la page.
- Dans la liste des projets, sélectionnez le projet que vous souhaitez supprimer, puis cliquez sur Supprimer.
- Dans la boîte de dialogue, saisissez l'ID du projet, puis cliquez sur Arrêter pour supprimer le projet.
Étapes suivantes
Commencez à développer avec l'API Maps Embed en configurant votre projet Google Cloud :
Pour obtenir la liste des paramètres et options supplémentaires que vous pouvez ajouter à votre iFrame :
Étendez votre projet Maps avec l'API JavaScript :