Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps Embed API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou choisir un projet
  2. Activer Google Maps Embed API
  3. Créer les clés appropriées
Continuer

Google Maps Embed API

Présentation

Google Maps Embed API vous permet de placer une carte interactive ou un panorama Street View sur votre site à l'aide d'une simple requête HTTP. Cette carte ou ce panorama peuvent être aisément intégrés à votre page Web en définissant l'URL Google Maps Embed API en tant qu'attribut src d'un iframe :

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

Une carte créée pour vous

Chaque visiteur de votre site voit une carte Google Map personnalisée. S'il est connecté avec son compte Google, ses lieux enregistrés, son domicile, son lieu de travail et plus encore sont intégrés dans la carte affichée. Cela signifie également que les interactions avec la carte, comme le marquage d'un lieu avec une étoile, sont conservées et pourront être consultées aisément dans Google Maps pour ordinateurs de bureau ou appareils mobiles.

Ces détails spécifiques à l'utilisateur ne sont pas visibles pour les autres utilisateurs. Chaque visiteur voit une carte créée spécialement pour lui.

Intégration aisée Il est facile d'ajouter des cartes

Google Maps Embed API à votre page Web — il suffit de définir l'URL que vous créez en tant que valeur d'attribut src d'un iframe. Contrôlez la taille de la carte grâce aux attributs height et width de l'iframe. JavaScript n'est pas nécessaire.

Pas de limite d'utilisation

Il n'y a aucune limite d'utilisation pour Google Maps Embed API. Vous pouvez intégrer des cartes ou des panoramas Street View à vos sites Web très fréquentés sans craindre d'atteindre un plafond d'utilisation ou une limite de requêtes par seconde.

Publicités sur la carte

Google Maps Embed API peut inclure de la publicité sur la carte. Le format et l'ensemble des publicités affichées sur une carte peuvent être modifiés sans préavis.

Composition de l'URL

L'URL d'une requête de Google Maps Embed API est composée comme suit :

https://www.google.com/maps/embed/v1/MODE?key=YOUR_API_KEY&parameters

Où :

  • {MODE} est place, directions, search, view ou streetview.
  • {YOUR_API_KEY} est votre clé d'API gratuite.
  • parameters inclut des paramètres facultatifs ainsi que des paramètres spécifiques au mode.

Clé d'API

Toutes les requêtes envoyées à Google Maps Embed API doivent inclure une clé d'API gratuite en tant que valeur d'un paramètre key. Votre clé vous permet de surveiller l'utilisation de Maps API par votre application et permet à Google de vous contacter à propos de votre site Web ou de votre application, le cas échéant.

Pour commencer à utiliser Google Maps Embed API, cliquez sur le bouton ci-dessous qui active Google Maps Embed API automatiquement et obtient une clé d'API.

Obtenir une clé

Vous pouvez également obtenir une clé d'API comme suit :

  1. Allez à la Google API Console.
  2. Créez ou sélectionnez un projet.
  3. Cliquez sur Continue pour activer l'API.
  4. Sur la page Credentials, procurez-vous une clé d'API (et définissez les restrictions de clé d'API).
    Remarque : Si vous avez une clé d'API sans restriction ou une clé avec des restrictions de navigateur, vous pouvez utiliser cette clé.
  5. Nous vous recommandons de sécuriser votre clé d'API en suivant ces meilleures pratiques.


Dans la Google API Console, vous pouvez également rechercher une clé existante ou afficher une liste des API activées.

Pour plus d'informations sur l'utilisation de la Google API Console, voir l'aide de la API Console.

Types de restrictions de clé d'API

Les Google Maps API sont disponibles pour les applications Android ou iOS, les navigateurs Web et via les services Web HTTP. Sur toute plateforme, les API peuvent utiliser une clé d'API générique (sans restriction). Vous pouvez éventuellement ajouter une restriction (par exemple, référent HTTP) à la clé d'API. Une fois restreinte, la clé fonctionne uniquement sur les plateformes qui prennent en charge ce type de restriction. En savoir plus sur les clés et les identifiants.

Modes Map

Quatre modes d'intégration de carte sont disponibles. Le mode est spécifié dans l'URL de la requête.

Mode Place

Le mode Place affiche un repère à un endroit ou une adresse en particulier, tel qu'un point d'intérêt, une entreprise, une caractéristique géographique ou une ville.

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

Le paramètre d'URL suivant est obligatoire :

  • q définit le lieu à mettre en évidence sur la carte. Il accepte les lieux sous forme de nom de lieu, d'adresse ou d'identifiant de lieu. La chaîne doit utiliser des caractères d'échappement d'URL afin qu'une adresse comme « City Hall, New York, NY » soit convertie en City+Hall,New+York,NY. (Google Maps Embed API prend en charge + et %20 pour l'échappement des espaces.) Les identifiants de lieu doivent présenter le préfixe place_id:.

Enregistrement attribué

Un utilisateur connecté à son compte Google pourra enregistrer le lieu indiqué par le paramètre q. Les lieux enregistrés seront visibles sur d'autres cartes Google sur le Web ou sur des appareils mobiles. Par défaut, les lieux enregistrés depuis une carte intégrée incluent des informations d'attribution pour rappeler aux utilisateurs où ils se trouvaient lorsqu'ils ont enregistré le lieu. Vous pouvez personnaliser l'attribution à l'aide des paramètres suivants.

  • attribution_source attribue l'enregistrement à votre site ou à votre application. Vous devez inclure un paramètre attribution_source personnalisé avant de définir attribution_web_url ou attribution_ios_deep_link_id. Il s'agit par défaut du chemin de l'URL de la page où la carte était affichée, par exemple : https://example.com/path/
  • attribution_web_url spécifie un lien renvoyant vers votre site Web. Si attribution_source n'est pas spécifié, attribution_web_url sera remplacé par défaut par l'URL où la carte intégrée est affichée, par exemple : https://example.com/path/page.html
  • attribution_ios_deep_link_id spécifie un modèle d'URL qui fournit un lien profond dans une application iOS. Lorsqu'il est visualisé sur Google Maps pour iOS, attribution_ios_deep_link_id sera affiché en lieu et place de attribution_web_url.

L'exemple ci-dessous affiche un repère sur l'Empress Hotel à Victoria, Colombie-Britannique. En enregistrant ce lieu, l'enregistrement est attribué à « Google Maps Embed API ». L'attribution apparaîtra sous forme d'une URL. L'exemple utilise le modèle d'URL Google Maps afin de fournir l'itinéraire aux utilisateurs iOS.

https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
  &q=Fairmont+Empress,Victoria+BC
  &attribution_source=Google+Maps+Embed+API
  &attribution_web_url=http://www.fairmont.com/empress-victoria/
  &attribution_ios_deep_link_id=comgooglemaps://?daddr=Fairmont+Empress,+Victoria,+BC

Mode Directions

Le mode Directions affiche le chemin entre plusieurs points sélectionnés sur la carte, ainsi que la distance et la durée du trajet.

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

Les paramètres d'URL suivants sont obligatoires :

  • origin définit le point de départ de l'itinéraire. La valeur peut être un nom de lieu, une adresse ou un identifiant de lieu. La chaîne doit utiliser des caractères d'échappement d'URL afin qu'une adresse comme « City Hall, New York, NY » soit convertie en City+Hall,New+York,NY. ( Google Maps Embed API prend en charge + et %20 pour l'échappement des espaces.) Les identifiants de lieu doivent comporter le préfixe place_id:.
  • destination définit le point final de l'itinéraire.

Les paramètres d'URL suivants sont facultatifs :

  • waypoints spécifie un ou plusieurs lieux intermédiaires par lesquels l'itinéraire doit passer entre le point de départ et la destination. Il est possible de spécifier plusieurs points de cheminement en utilisant la barre verticale (|) pour séparer les lieux (par ex., Berlin,Germany|Paris,France). Vous pouvez indiquer jusqu'à 20 points de cheminement. Chaque point de cheminement peut être un nom de lieu, une adresse ou un identifiant de lieu.
  • mode définit le mode de déplacement. Les options possibles sont driving, walking (qui privilégie les voies piétonnes et les trottoirs, le cas échéant), bicycling (qui passe par des pistes cyclables et privilégie certaines rues, le cas échéant), transit ou flying. Si aucun mode n'est spécifié, Google Maps Embed API affichera un ou plusieurs des modes les plus pertinents pour le trajet spécifié.
  • avoid indique à Google Maps d'éviter les tolls, ferries et/ou highways. Séparez les différentes valeurs à l'aide de la barre verticale (par ex., avoid=tolls|highways). Notez que cela n'exclut pas les trajets incluant le ou les éléments à éviter ; les résultats privilégient simplement les itinéraires les plus favorables.
  • units spécifie les unités metric ou imperial lors de l'affichage des distances dans les résultats. Si units n'est pas spécifié, le pays de origin de la requête détermine les unités à utiliser.

Le mode Search affiche les résultats d'une recherche dans toute la région visible sur la carte. Il est recommandé de définir un lieu à rechercher, soit en incluant un lieu dans le critère de recherche (record+stores+in+Seattle), soit en incluant un paramètre center et zoom pour délimiter la recherche.

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

Le paramètre d'URL suivant est obligatoire :

  • q spécifie le critère de recherche. Il peut inclure une restriction géographique, comme in+Seattle ou near+98033.

Mode View

Le mode View renvoie une carte sans repères ni itinéraire.

L'exemple ci-dessous utilise le paramètre facultatif maptype pour afficher une vue satellite de la carte.

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

Le paramètre d'URL suivant est obligatoire :

  • center définit le centre de la fenêtre de la carte et accepte une latitude et une longitude sous forme de valeurs séparées par des virgules (-33.8569,151.2152).

Paramètres facultatifs

Les paramètres facultatifs suivants peuvent être utilisés avec n'importe lequel des modes de carte indiqués ci-dessus.

  • center définit le centre de la vue de la carte. Il accepte des valeurs de latitude et de longitude séparées par une virgule (par exemple,37.4218,-122.0840).

  • zoom détermine le niveau de zoom initial de la carte. Les valeurs acceptées sont comprises entre 0 (le monde entier) et 21 (bâtiments individuels). La limite supérieure peut varier en fonction des données de carte disponibles pour le lieu sélectionné.

  • maptype peut être roadmap (par défaut) ou satellite, et définit le type de tuiles de carte à charger.

  • language définit la langue à utiliser pour les éléments de l'interface utilisateur et pour l'affichage de libellés sur les tuiles de carte. Notez que ce paramètre est uniquement pris en charge pour certaines tuiles de pays. Si la langue demandée n'est pas prise en charge pour l'ensemble des tuiles, la langue par défaut de cet ensemble de tuiles sera utilisée. Par défaut, les visiteurs verront les cartes dans leur langue.

  • region définit les frontières et les libellés à afficher, en fonction des sensibilités géopolitiques. Accepte un code de région spécifié sous forme de valeur ccTLD (domaine de premier niveau) à deux caractères.

Paramètres d'identifiant de lieu

Google Maps Embed API prend en charge l'utilisation d'identifiants de lieu plutôt qu'un nom de lieu ou une adresse. Les identifiants de lieu permettent d'identifier un lieu de manière stable et unique. Voir la documentation sur Google Places API pour plus d'informations sur la recherche et l'utilisation des identifiants de lieu.

Google Maps Embed API accepte les identifiants de lieu pour les paramètres d'URL suivants :

  • q

  • origin

  • destination

  • waypoints

Pour utiliser un identifiant de lieu, vous devez d'abord ajouter le préfixe place_id:. Le code suivant spécifie l'hôtel de ville de New York comme point de départ de le demande d'itinéraire : request: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

Mode Street View

Google Maps Embed API vous permet d'afficher des images Street View sur votre site ou votre blog en tant que panoramas interactifs. Google Street View offre des vues panoramiques à partir des lieux sélectionnés dans sa zone de couverture. Des photo-sphères auxquelles contribuent les utilisateurs, et des collections spéciales Street View sont également disponibles.

Chaque panorama Street View propose une vue complète à 360 degrés d'un même lieu. Les images contiennent une vue horizontale à 360 degrés (tour d'horizon complet) et une vue verticale à 180 degrés (du zénith au nadir). Le mode streetview fournit une visionneuse qui affiche le panorama obtenu sous la forme d'une sphère avec un appareil photo en son centre. Vous pouvez manipuler cet appareil photo pour contrôler le zoom et l'orientation.

https://www.google.com/maps/embed/v1/streetview
  ?key=YOUR_API_KEY
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

L'un des paramètres d'URL suivants est obligatoire :

  • location accepte une latitude et une longitude sous forme de valeurs séparées par des virgules (46.414382,10.013988). L'API affichera le panorama photographié le plus proche de ce lieu. Étant donné que les images Street View sont régulièrement actualisées et que les photos sont susceptibles d'être prises depuis des emplacements légèrement différents à chaque fois, il est possible que votre lieu affiche un panorama différent une fois les images mises à jour.

  • pano est un identifiant de panorama spécifique. Si vous spécifiez pano, vous pouvez également spécifier location. location sera utilisé uniquement si l'API ne parvient pas à trouver l'identifiant de panorama.

Les paramètres d'URL suivants sont facultatifs :

  • heading indique le cap de la boussole de l'appareil photo en degrés dans le sens horaire, depuis le nord. Les valeurs acceptées sont comprises entre -180° et 360°.

  • pitch spécifie l'angle, vers le haut ou le bas, de l'appareil photo. pitch est spécifié en degrés, de -90° à 90°. Les valeurs positives inclineront l'appareil photo vers le haut, alors que les valeurs négatives inclineront l'appareil photo vers le bas. L'inclinaison par défaut de 0° est définie en fonction de la position de l'appareil photo lorsque l'image a été capturée. Ainsi, une inclinaison de 0° est souvent, mais pas toujours, horizontale. Par exemple, une image prise sur une colline présentera probablement une inclinaison par défaut qui n'est pas horizontale.

  • fov détermine le champ de vision horizontal de l'image. Le champ de vision est exprimé en degrés, dans une fourchette comprise entre 10° et 100°. Sa valeur par défaut est de 90°. Dans le cas d'une fenêtre d'affichage à taille fixe, le champ de vision peut être assimilé au niveau de zoom, où un petit nombre indique un niveau de zoom plus important.

  • language définit la langue à utiliser pour les éléments de l'interface utilisateur et les étiquettes. Par défaut, les visiteurs verront les éléments de l'interface utilisateur dans leur propre langue.

  • region définit les frontières et les libellés à afficher, en fonction des sensibilités géopolitiques. Accepte un code de région spécifié sous forme de valeur ccTLD (domaine de premier niveau) à deux caractères.

Intégration de la carte

Pour utiliser Google Maps Embed API sur votre page Web, définissez l'URL que vous avez créée comme valeur d'attribut src d'un iframe. Contrôlez la taille de la carte à l'aide des attributs height et width de l'iframe :

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&q=record+stores+in+Seattle" allowfullscreen>
</iframe>

Astuce : Ajoutez allowfullscreen aux propriétés de votre iframe pour autoriser l'affichage en plein écran de certaines parties de la carte. Astuce : Les propriétés frameborder="0" et style="border:0" suppriment la bordure iframe standard autour de la carte.

Vous pouvez redimensionner l'iframe afin de l'adapter à la structure et au design de votre site Web, mais les utilisateurs ont généralement plus de facilité à interagir avec des cartes de grande taille. Notez que les cartes intégrées ne sont pas prises en charge si leur taille est inférieure à 200 px en hauteur ou en largeur.

Envoyer des commentaires concernant…

Google Maps Embed API
Google Maps Embed API
Besoin d'aide ? Consultez notre page d'assistance.