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 carte ; .

Ajouter l'URL dans un iFrame

Pour utiliser l'API Maps Embed sur votre page Web, définissez l'URL créé comme valeur de l'attribut src d'un iFrame. Contrôler 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 norme bordure iFrame à partir de la carte.
  • La propriété referrerpolicy="no-referrer-when-downgrade" pour autoriser navigateur d'envoyer l'URL complète en tant qu'en-tête Referer avec la requête, afin que Les restrictions de clés API pourraient fonctionner correctement.

Vous pouvez redimensionner l'iFrame pour l'adapter à la structure et au design de votre propre site Web, mais nous constatons qu'il est généralement plus facile pour les visiteurs d'interagir avec des cartes plus grandes. Notez que les cartes intégrées ne sont pas prises en charge si leur taille est inférieure à 200 pixels. .

Restrictions de clé API

Si une balise Meta referrer du site Web d'hébergement est définie sur no-referrer ou same-origin, le navigateur n'enverra pas l'en-tête Referer à Google. Ce peut entraîner des restrictions de clé API de rejeter les demandes. Pour que la restriction fonctionne correctement, ajoutez un referrerpolicy à l'iFrame, comme dans l'exemple ci-dessus, pour indiquer explicitement autoriser 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 d'annonce l'ensemble des annonces affichées sur une carte donnée peut être modifié 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 pour un lieu ou une adresse spécifique. comme un point de repère, une entreprise, un élément géographique ou une ville.
  • view: renvoie une carte sans repère ni itinéraire.
  • directions: affiche le chemin entre deux ou plusieurs les points spécifiés sur la carte, ainsi que la distance et le temps de trajet.
  • streetview: affiche les vues panoramiques interactives du emplacements désignés.
  • search: affiche les résultats d'une recherche dans la carte visible. dans la même région.

Mode place

L'URL suivante utilise le mode carte place pour afficher un repère sur la carte au niveau 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ètre 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" à City+Hall,New+York,NY ou plus codes "849VCWC8+R9" à 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. Par exemple: 37.4218,-122.0840
zoom Facultatif Définit le niveau de zoom initial de la carte. Valeurs allant de 0 (le monde entier) à 21 (bâtiments individuels). La limite supérieure peut varier en fonction des données de la carte disponibles à l'emplacement 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 langue. Ce paramètre n'est pris en charge que pour certaines tuiles de pays ; si la langue demandée n'est pas prise en charge pour l'ensemble de vignettes, la langue par défaut de cet ensemble d'éléments sera utilisée.
region Facultatif Définit les frontières et les libellés à afficher, en fonction et des sensibilités géopolitiques. Accepte un code régional à deux caractères (non numérique) Mappage de sous-tag de la région Unicode sur le ccTLD ("domaine de premier niveau") familier à deux caractères. Découvrez Google Maps Platform Détails de la couverture pour 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ètre 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. Par exemple: 37.4218,-122.0840
zoom Facultatif Définit le niveau de zoom initial de la carte. Valeurs allant de 0 (le monde entier) à 21 (bâtiments individuels). La limite supérieure peut varier en fonction des données de la carte disponibles à l'emplacement 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 langue. Ce paramètre n'est pris en charge que pour certaines tuiles de pays ; si la langue demandée n'est pas prise en charge pour l'ensemble de vignettes, la langue par défaut de cet ensemble d'éléments sera utilisée.
region Facultatif Définit les frontières et les libellés à afficher, en fonction et des sensibilités géopolitiques. Accepte un code régional à deux caractères (non numérique) Mappage de sous-tag de la région Unicode sur le ccTLD ("domaine de premier niveau") familier à deux caractères. Découvrez Google Maps Platform Détails de la couverture pour les régions compatibles

Mode directions

L'exemple suivant utilise le mode directions pour afficher le chemin entre Oslow et Telemark en Norvège, 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ètre 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 séquence d'échappement dans une URL, adresse, plus code, latitude/longitude coordonnées ou identifiant 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" à City+Hall,New+York,NY ou plus codes "849VCWC8+R9" à 849VCWC8%2BR9
destination Obligatoire Définit le point d'arrivée de l'itinéraire. Nom de lieu avec séquence d'échappement dans une URL, adresse, plus code, latitude/longitude coordonnées ou identifiant 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" à City+Hall,New+York,NY ou plus codes "849VCWC8+R9" à 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 indiquer des lieux distincts (par exemple, Berlin,Germany|Paris,France). Vous pouvez spécifiez 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 le route spécifique. driving, walking (préférence pour les piétons) chemins et trottoirs, le cas échéant), bicycling (qui des itinéraires empruntant des pistes cyclables et des 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 ne concerne pas exclure les itinéraires incluant les éléments géographiques soumis à des restrictions ; elle biaise vers des routes 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 les distances dans les résultats. Si units n'est pas spécifié, le origin pays 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. Par exemple: 37.4218,-122.0840
zoom Facultatif Définit le niveau de zoom initial de la carte. Valeurs allant de 0 (le monde entier) à 21 (bâtiments individuels). La limite supérieure peut varier en fonction des données de la carte disponibles à l'emplacement 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 langue. Ce paramètre n'est pris en charge que pour certaines tuiles de pays ; si la langue demandée n'est pas prise en charge pour l'ensemble de vignettes, la langue par défaut de cet ensemble d'éléments sera utilisée.
region Facultatif Définit les frontières et les libellés à afficher, en fonction et des sensibilités géopolitiques. Accepte un code régional à deux caractères (non numérique) Mappage de sous-tag de la région Unicode sur le ccTLD ("domaine de premier niveau") familier à deux caractères. Découvrez Google Maps Platform Détails de la couverture pour les régions compatibles

Mode streetview

L'API Maps Embed vous permet d'afficher des images Street View des panoramas interactifs à partir d'emplacements désignés tout au long de sa zone de couverture. Utilisateur a contribué à des photo-sphères ; Collections spéciales Street View sont également à disposition.

Chaque panorama Street View offre une vue complète à 360 degrés à partir d'une seule image l'emplacement. Les images contiennent une vue horizontale à 360 degrés (tour d'horizon complet). et une vue verticale sur 180 degrés (du haut vers le bas). La Le mode streetview fournit un lecteur qui affiche le résultat sous forme de sphère avec une caméra au centre. Vous pouvez manipuler l'appareil photo pour contrôler le zoom et l'orientation de la caméra.

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 séparées par une virgule. (46.414382,10.013988). L'API affiche le panorama photographiée la plus proche de ce lieu. Parce que les images Street View sont régulièrement actualisées, et les photos peuvent être prises à partir de position à chaque fois, il est possible que votre position soit alignée sur une position panorama lorsque les images sont mises à jour.

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

Les paramètres d'URL suivants sont facultatifs :

Paramètre 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 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 feront l'objet d'un angle l'appareil photo vers le haut, tandis que les valeurs négatives l'orienteront vers le bas. La L'inclinaison par défaut de 0° est définie en fonction de la position de la caméra lorsque l'image a été capturée. Pour cette raison, un inclinaison de 0° est souvent, mais pas toujours, horizontalement. Par exemple, une photo prise sur une colline présentent 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. Il la valeur par défaut est de 90°. Dans le cas d'une fenêtre d'affichage de taille fixe, le champ peut être considérée comme le niveau de zoom. Un nombre plus faible indique un niveau de zoom plus é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. Par exemple: 37.4218,-122.0840
zoom Facultatif Définit le niveau de zoom initial de la carte. Valeurs allant de 0 (le monde entier) à 21 (bâtiments individuels). La limite supérieure peut varier en fonction des données de la carte disponibles à l'emplacement 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 langue. Ce paramètre n'est pris en charge que pour certaines tuiles de pays ; si la langue demandée n'est pas prise en charge pour l'ensemble de vignettes, la langue par défaut de cet ensemble d'éléments sera utilisée.
region Facultatif Définit les frontières et les libellés à afficher, en fonction et des sensibilités géopolitiques. Accepte un code régional à deux caractères (non numérique) Mappage de sous-tag de la région Unicode sur le ccTLD ("domaine de premier niveau") familier à deux caractères. Découvrez Google Maps Platform Détails de la couverture pour 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. Il est recommandé de définir un lieu pour la recherche, indiquer un lieu dans le terme de recherche (record+stores+in+Seattle) ; ou 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ètre Type Description Valeurs acceptées
q Obligatoire Définit le terme de recherche. Il peut s'agir d'une restriction géographique, comme 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. Par exemple: 37.4218,-122.0840
zoom Facultatif Définit le niveau de zoom initial de la carte. Valeurs allant de 0 (le monde entier) à 21 (bâtiments individuels). La limite supérieure peut varier en fonction des données de la carte disponibles à l'emplacement 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 langue. Ce paramètre n'est pris en charge que pour certaines tuiles de pays ; si la langue demandée n'est pas prise en charge pour l'ensemble de vignettes, la langue par défaut de cet ensemble d'éléments sera utilisée.
region Facultatif Définit les frontières et les libellés à afficher, en fonction et des sensibilités géopolitiques. Accepte un code régional à deux caractères (non numérique) Mappage de sous-tag de la région Unicode sur le ccTLD ("domaine de premier niveau") familier à deux caractères. Découvrez Google Maps Platform Détails de la couverture pour les régions compatibles

Paramètres d'ID de lieu

L'API Maps Embed prend en charge l'utilisation d'ID de lieu au lieu de fournir un le nom ou l'adresse du lieu. Les ID de lieu constituent un moyen stable de définir à identifier un lieu. Pour en savoir plus, consultez la documentation de l'API Google Places.

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

  • q
  • origin
  • destination
  • waypoints

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

  • radius définit un rayon, spécifié en mètres, dans lequel rechercher un panoramique centré sur la latitude et la longitude données. 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 valides sont les suivantes :

    • default utilise les sources par défaut pour Street View. les recherches sont et non à des sources spécifiques.
    • outdoor limite les recherches aux collections extérieures. À l'intérieur les collections ne sont pas incluses dans les résultats de recherche. Notez que les panoramas extérieurs peut ne pas exister pour l'emplacement spécifié. Notez également que la recherche renvoie des panoramas pour lesquels il est possible de déterminer s'ils se trouvent à l'intérieur ou à l'extérieur. Par exemple, les photosphères ne sont pas renvoyées, car elles sont inconnues. à l'intérieur ou à l'extérieur.