Intégration d'une carte

Ce guide explique comment intégrer une carte interactive à votre page Web.

Créer l'URL de l'API Maps Embed

Voici un exemple d'URL qui charge l'API Maps Embed:

https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

Remplacez :

  • MAP_MODE par votre mode Carte.
  • YOUR_API_KEY par votre clé API. Pour en savoir plus, consultez Obtenir une clé API.
  • PARAMETERS par les paramètres obligatoires et facultatifs de votre mode de carte.

Ajouter l'URL dans un iFrame

Pour utiliser l'API Maps Embed sur votre page Web, définissez l'URL que vous avez créée comme valeur de l'attribut src d'un iFrame. Contrôlez la taille de la carte avec les attributs height et width de l'iFrame, par exemple:

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
  allowfullscreen>
</iframe>

L'exemple d'iFrame ci-dessus utilise des propriétés supplémentaires:

  • Propriété allowfullscreen pour permettre le passage en plein écran de certaines parties de la carte.
  • Les propriétés frameborder="0" et style="border:0" pour supprimer la bordure iFrame standard autour de la carte.
  • La propriété referrerpolicy="no-referrer-when-downgrade" pour permettre au navigateur d'envoyer l'URL complète en tant qu'en-tête Referer avec la requête afin que les restrictions de clé API puissent fonctionner correctement.

Vous pouvez redimensionner l'iFrame pour l'adapter à la structure et au design de votre propre site Web, mais nous constatons que les visiteurs préfèrent généralement interagir avec des cartes plus grandes. Notez que les cartes intégrées ne sont pas compatibles avec une taille inférieure à 200 pixels dans l'une ou l'autre des dimensions.

Restrictions de clé API

Si le site Web d'hébergement comporte une balise Meta referrer définie sur no-referrer ou same-origin, le navigateur n'enverra pas l'en-tête Referer à Google. Cela peut entraîner le rejet des requêtes par la restriction de clé API. Pour que la restriction fonctionne correctement, ajoutez une propriété referrerpolicy à l'iFrame, comme dans l'exemple ci-dessus, afin d'autoriser explicitement l'envoi d'en-têtes Referer à Google.

Publicités sur la carte

L'API Maps Embed peut inclure de la publicité sur la carte. Le format des annonces et l'ensemble des annonces diffusées sur une carte donnée peuvent changer sans préavis.

Choisir des modes de carte

Vous pouvez spécifier l'un des modes de carte suivants à utiliser dans votre URL de requête:

  • place: affiche un repère sur la carte à un lieu ou à une adresse spécifique, comme un point de repère, un établissement, un élément géographique ou une ville.
  • view: renvoie une carte sans repère ni itinéraire.
  • directions: affiche le chemin entre plusieurs points spécifiés sur la carte, ainsi que la distance et le temps de trajet.
  • streetview: affiche des vues panoramiques interactives à partir des emplacements spécifiés.
  • search: affiche les résultats d'une recherche dans la région visible de la carte.

Mode place

L'URL suivante utilise le mode Carte place pour afficher un repère sur la carte dans la tour Eiffel:

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

Vous pouvez utiliser les paramètres suivants :

Paramètres Type Description Valeurs acceptées
q Obligatoire Définit l'emplacement du repère sur la carte. Nom, adresse, plus code ou ID de lieu avec échappement dans une URL. L'API Maps Embed est compatible avec + et %20 lors de l'échappement d'espaces. Par exemple, convertissez "Hôtel de ville, New York, NY" en City+Hall,New+York,NY, ou les plus codes "849VCWC8+R9" en 849VCWC8%2BR9.
center Facultatif Définit le centre de la vue plan. Accepte les valeurs de latitude et de longitude séparées par une virgule. Exemple : 37.4218,-122.0840.
zoom Facultatif Définit le niveau de zoom initial de la carte. Valeurs comprises entre 0 (le monde entier) et 21 (bâtiments individuels). La limite supérieure peut varier en fonction des données cartographiques disponibles pour le lieu sélectionné.
maptype Facultatif Définit le type de tuiles de carte à charger. roadmap (par défaut) ou satellite
language Facultatif Définit la langue à utiliser pour les éléments de l'interface utilisateur et pour l'affichage des libellés sur les tuiles de carte. Par défaut, la carte s'affiche dans la langue des visiteurs. Ce paramètre n'est compatible qu'avec certaines tuiles de pays. Si la langue spécifique demandée n'est pas prise en charge pour l'ensemble de tuiles, la langue par défaut de cet ensemble de tuiles est utilisée.
region Facultatif Définit les frontières et les libellés appropriés à afficher, en fonction des sensibilités géopolitiques. Accepte un code régional spécifié sous la forme d'un mappage de sous-tag de région Unicode à deux caractères (non numériques) sur des valeurs ccTLD ("domaine de premier niveau") à deux caractères que vous connaissez. Consultez Détails de la couverture Google Maps Platform pour connaître les régions compatibles.

Mode view

L'exemple suivant utilise le mode view et 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

Vous pouvez utiliser les paramètres suivants :

Paramètres Type Description Valeurs acceptées
center Obligatoire Définit le centre de la vue plan. Accepte les valeurs de latitude et de longitude séparées par une virgule. Exemple : 37.4218,-122.0840.
zoom Facultatif Définit le niveau de zoom initial de la carte. Valeurs comprises entre 0 (le monde entier) et 21 (bâtiments individuels). La limite supérieure peut varier en fonction des données cartographiques disponibles pour le lieu sélectionné.
maptype Facultatif Définit le type de tuiles de carte à charger. roadmap (par défaut) ou satellite
language Facultatif Définit la langue à utiliser pour les éléments de l'interface utilisateur et pour l'affichage des libellés sur les tuiles de carte. Par défaut, la carte s'affiche dans la langue des visiteurs. Ce paramètre n'est compatible qu'avec certaines tuiles de pays. Si la langue spécifique demandée n'est pas prise en charge pour l'ensemble de tuiles, la langue par défaut de cet ensemble de tuiles est utilisée.
region Facultatif Définit les frontières et les libellés appropriés à afficher, en fonction des sensibilités géopolitiques. Accepte un code régional spécifié sous la forme d'un mappage de sous-tag de région Unicode à deux caractères (non numériques) sur des valeurs ccTLD ("domaine de premier niveau") à deux caractères que vous connaissez. Consultez Détails de la couverture Google Maps Platform pour connaître les régions compatibles.

Mode directions

L'exemple suivant utilise le mode directions pour afficher le trajet entre Oslow et Telemark, en Norvège, ainsi que la distance et le temps de trajet en évitant les péages et les autoroutes.

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

Vous pouvez utiliser les paramètres suivants :

Paramètres Type Description Valeurs acceptées
origin Obligatoire Définit le point de départ à partir duquel l'itinéraire doit être affiché. Nom de lieu avec échappement dans une URL, adresse, plus code, coordonnées de latitude/longitude ou ID de lieu. L'API Maps Embed est compatible avec + et %20 lors de l'échappement d'espaces. Par exemple, convertissez "Hôtel de ville, New York, NY" en City+Hall,New+York,NY, ou les plus codes "849VCWC8+R9" en 849VCWC8%2BR9.
destination Obligatoire Définit le point d'arrivée de l'itinéraire. Nom de lieu avec échappement dans une URL, adresse, plus code, coordonnées de latitude/longitude ou ID de lieu. L'API Maps Embed est compatible avec + et %20 lors de l'échappement d'espaces. Par exemple, convertissez "Hôtel de ville, New York, NY" en City+Hall,New+York,NY, ou les plus codes "849VCWC8+R9" en 849VCWC8%2BR9.
waypoints Facultatif Spécifie un ou plusieurs lieux intermédiaires pour l'itinéraire entre le point de départ et la destination. Nom, adresse ou ID de lieu. Vous pouvez spécifier plusieurs points de cheminement en utilisant la barre verticale (|) pour séparer les différents lieux (par exemple, Berlin,Germany|Paris,France). Vous pouvez spécifier jusqu'à 20 points de cheminement.
mode Facultatif Définit le mode de transport. Si aucun mode n'est spécifié, l'API Maps Embed affiche un ou plusieurs des modes les plus pertinents pour l'itinéraire spécifié. driving, walking (pour les voies piétonnes et les trottoirs, le cas échéant), bicycling (pour les itinéraires empruntant les pistes cyclables et les rues à privilégier, le cas échéant), transit ou flying.
avoid Facultatif Spécifie les éléments géographiques à éviter dans les itinéraires. Notez que cela n'exclut pas les itinéraires qui incluent le ou les éléments géographiques soumis à des restrictions. Le résultat est alors orienté vers les itinéraires plus favorables. tolls, ferries et/ou highways. Séparez les différentes valeurs à l'aide d'une barre verticale (par exemple, avoid=tolls|highways).
units Facultatif Spécifie la méthode de mesure (métrique ou impériale) lors de l'affichage des distances dans les résultats. Si les units ne sont pas spécifiés, le pays (origin) de la requête détermine les unités à utiliser. metric ou imperial
center Facultatif Définit le centre de la vue plan. Accepte les valeurs de latitude et de longitude séparées par une virgule. Exemple : 37.4218,-122.0840.
zoom Facultatif Définit le niveau de zoom initial de la carte. Valeurs comprises entre 0 (le monde entier) et 21 (bâtiments individuels). La limite supérieure peut varier en fonction des données cartographiques disponibles pour le lieu sélectionné.
maptype Facultatif Définit le type de tuiles de carte à charger. roadmap (par défaut) ou satellite
language Facultatif Définit la langue à utiliser pour les éléments de l'interface utilisateur et pour l'affichage des libellés sur les tuiles de carte. Par défaut, la carte s'affiche dans la langue des visiteurs. Ce paramètre n'est compatible qu'avec certaines tuiles de pays. Si la langue spécifique demandée n'est pas prise en charge pour l'ensemble de tuiles, la langue par défaut de cet ensemble de tuiles est utilisée.
region Facultatif Définit les frontières et les libellés appropriés à afficher, en fonction des sensibilités géopolitiques. Accepte un code régional spécifié sous la forme d'un mappage de sous-tag de région Unicode à deux caractères (non numériques) sur des valeurs ccTLD ("domaine de premier niveau") à deux caractères que vous connaissez. Consultez Détails de la couverture Google Maps Platform pour connaître les régions compatibles.

Mode streetview

L'API Maps Embed vous permet d'afficher des images Street View sous forme de panoramas interactifs à partir de lieux désignés dans la zone de couverture. Des photosphères ajoutées par les utilisateurs et des collections spéciales Street View sont également disponibles.

Chaque panorama Street View fournit 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 haut vers le bas). Le mode streetview fournit une visionneuse qui affiche le panorama obtenu sous forme de sphère avec une caméra en son centre. Vous pouvez manipuler la caméra pour contrôler le zoom et l'orientation.

Regardez le panorama suivant en mode streetview:

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 une virgule (46.414382,10.013988). L'API affichera le panorama photographié le plus proche de ce point géographique. Étant donné que les images Street View sont actualisées régulièrement et que les photos peuvent être prises à chaque fois dans des positions légèrement différentes, il est possible que votre établissement s'aligne sur un panorama différent lors de la mise à jour des images.

  • pano est un identifiant de panorama spécifique. Si vous spécifiez un pano, vous pouvez également spécifier un location. location ne sera utilisé que si l'API ne trouve pas l'ID du panorama.

Les paramètres d'URL suivants sont facultatifs :

Paramètres Type Description Valeurs acceptées
heading Facultatif Indique la direction de la boussole de la caméra en degrés dans le sens des aiguilles d'une montre à partir du nord. Valeur en degrés comprise entre -180° et 360°
pitch Facultatif spécifie l'angle, vers le haut ou vers le bas, de l'appareil photo. Les valeurs positives orientent l'appareil photo vers le haut, tandis que les valeurs négatives orientent l'appareil photo vers le bas. L'inclinaison par défaut de 0° est définie en fonction de la position de la caméra au moment de la prise de vue. Pour cette raison, 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. Valeur en degrés comprise entre -90° et 90°
fov Facultatif détermine le champ de vision horizontal de l'image. La valeur par défaut est de 90°. Dans le cas d'une fenêtre d'affichage de taille fixe, le champ de vision peut être considéré comme le niveau de zoom. Plus les valeurs sont faibles, plus le niveau de zoom est élevé. Valeur en degrés, dans une plage de 10° à 100°
center Facultatif Définit le centre de la vue plan. Accepte les valeurs de latitude et de longitude séparées par une virgule. Exemple : 37.4218,-122.0840.
zoom Facultatif Définit le niveau de zoom initial de la carte. Valeurs comprises entre 0 (le monde entier) et 21 (bâtiments individuels). La limite supérieure peut varier en fonction des données cartographiques disponibles pour le lieu sélectionné.
maptype Facultatif Définit le type de tuiles de carte à charger. roadmap (par défaut) ou satellite
language Facultatif Définit la langue à utiliser pour les éléments de l'interface utilisateur et pour l'affichage des libellés sur les tuiles de carte. Par défaut, la carte s'affiche dans la langue des visiteurs. Ce paramètre n'est compatible qu'avec certaines tuiles de pays. Si la langue spécifique demandée n'est pas prise en charge pour l'ensemble de tuiles, la langue par défaut de cet ensemble de tuiles est utilisée.
region Facultatif Définit les frontières et les libellés appropriés à afficher, en fonction des sensibilités géopolitiques. Accepte un code régional spécifié sous la forme d'un mappage de sous-tag de région Unicode à deux caractères (non numériques) sur des valeurs ccTLD ("domaine de premier niveau") à deux caractères que vous connaissez. Consultez Détails de la couverture Google Maps Platform pour connaître les régions compatibles.

Mode search

Le mode Search affiche les résultats d'une recherche effectuée dans la région visible de la carte. Nous vous recommandons de définir une zone géographique pour la recherche, soit en incluant une zone dans le terme de recherche (record+stores+in+Seattle), soit en incluant des paramètres center et zoom pour lier la recherche.

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

Vous pouvez utiliser les paramètres suivants :

Paramètres Type Description Valeurs acceptées
q Obligatoire Définit le terme de recherche. Il peut inclure une restriction géographique, telle que in+Seattle ou near+98033.
center Facultatif Définit le centre de la vue plan. Accepte les valeurs de latitude et de longitude séparées par une virgule. Exemple : 37.4218,-122.0840.
zoom Facultatif Définit le niveau de zoom initial de la carte. Valeurs comprises entre 0 (le monde entier) et 21 (bâtiments individuels). La limite supérieure peut varier en fonction des données cartographiques disponibles pour le lieu sélectionné.
maptype Facultatif Définit le type de tuiles de carte à charger. roadmap (par défaut) ou satellite
language Facultatif Définit la langue à utiliser pour les éléments de l'interface utilisateur et pour l'affichage des libellés sur les tuiles de carte. Par défaut, la carte s'affiche dans la langue des visiteurs. Ce paramètre n'est compatible qu'avec certaines tuiles de pays. Si la langue spécifique demandée n'est pas prise en charge pour l'ensemble de tuiles, la langue par défaut de cet ensemble de tuiles est utilisée.
region Facultatif Définit les frontières et les libellés appropriés à afficher, en fonction des sensibilités géopolitiques. Accepte un code régional spécifié sous la forme d'un mappage de sous-tag de région Unicode à deux caractères (non numériques) sur des valeurs ccTLD ("domaine de premier niveau") à deux caractères que vous connaissez. Consultez Détails de la couverture Google Maps Platform pour connaître les régions compatibles.

Paramètres d'ID de lieu

L'API Maps Embed accepte l'utilisation d'ID de lieu au lieu de fournir un nom ou une adresse de lieu. Les ID de lieu constituent un moyen stable d'identifier un lieu de manière unique. Pour en savoir plus, consultez la documentation de l'API Google Places.

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

  • q
  • origin
  • destination
  • waypoints

Pour utiliser un ID 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 d'une requête d'itinéraire: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius définit un rayon, spécifié en mètres, dans lequel rechercher un panorama, centré sur la latitude et la longitude données. Les valeurs valides sont des entiers non négatifs. La valeur par défaut est 50.

  • source limite les recherches Street View aux sources sélectionnées. Les valeurs possibles sont les suivantes :

    • default utilise les sources par défaut pour Street View. Les recherches ne sont pas limitées à des sources spécifiques.
    • outdoor limite les recherches aux collections extérieures. Les collections d'intérieur ne sont pas incluses dans les résultats de recherche. Notez qu'il est possible que les panoramas extérieurs ne soient pas disponibles pour le lieu spécifié. Notez également que la recherche ne renvoie que les panoramas s'il est possible de déterminer s'ils se trouvent à l'intérieur ou à l'extérieur. Par exemple, les photo-sphères ne sont pas renvoyées, car il est impossible de savoir s'ils se trouvent à l'intérieur ou à l'extérieur.