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 avec votre mode de 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 que vous avez créée comme valeur de l'attribut src
d'une 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"
etstyle="border:0"
pour supprimer la bordure d'iframe standard autour 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êteReferer
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 acceptées si leur taille est inférieure à 200 px dans l'une ou l'autre dimension.
Restrictions de clé API
Si la balise Meta referrer
du site Web hôte est définie sur no-referrer
ou same-origin
, le navigateur n'envoie pas l'en-tête Referer
à Google. Votre restriction de clé API peut alors refuser les requêtes. 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.
Annonces 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ères ni itinéraires.directions
: affiche le trajet entre deux points ou plus spécifiés sur la carte, ainsi que la distance et le temps de trajet.streetview
: affiche les vues panoramiques interactives du des emplacements désignés.search
: affiche les résultats d'une recherche dans la région de la carte visible.
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 comprises entre 0 (le monde entier) et 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, les visiteurs verront une carte dans leur propre 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 de mosaïques 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 maptype
facultatif pour afficher une vue satellite de la carte :
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
¢er=-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 de la carte. | 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 comprises entre 0 (le monde entier) et 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, les visiteurs verront une carte dans leur propre 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 de mosaïques 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 afficher 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 |
destination |
Obligatoire | Définit le point d'arrivée de l'itinéraire. | Nom de lieu, adresse, code plus, coordonnées de latitude/longitude ou ID de lieu encodés au format URL.
L'API Maps Embed accepte à la fois + et %20 pour échapper aux 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 calculer un itinéraire entre le point de départ et la destination. | Nom, adresse ou ID de lieu du 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 l'itinéraire spécifié. | driving , walking (qui privilégie les voies piétonnes et les trottoirs, le cas échéant), bicycling (qui emprunte 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 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 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. Par 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 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, les visiteurs verront une carte dans leur propre 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 de mosaïques 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 spécifié sous la forme d'un sous-tag de région Unicode à deux caractères (non numériques) mappant des valeurs ccTLD (domaine de premier niveau) à deux caractères familières. Consultez Détails de la couverture Google Maps Platform pour obtenir une liste des régions compatibles. |
Mode streetview
L'API Maps Embed vous permet d'afficher des images Street View sous forme de panoramas interactifs à partir d'emplacements désignés dans sa zone de couverture. Les Photospheres créées par les utilisateurs et les collections spéciales Street View sont également disponibles.
Chaque panorama Street View offre 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 sur 180 degrés (du haut vers le bas). Le mode streetview
fournit une visionneuse qui affiche le panorama obtenu sous la forme d'une 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 sous forme de valeurs séparées par une virgule (46.414382,10.013988
). L'API affiche le panorama photographié le plus proche de cet emplacement. 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 unpano
, vous pouvez également spécifier unlocation
.location
n'est utilisé que si l'API ne parvient pas à trouver l'ID du panorama.
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. L'inclinaison par défaut de 0° est définie en fonction de la position de la caméra au moment de la capture de l'image. Pour cette raison, un inclinaison de 0° est souvent, mais pas toujours, horizontalement. 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. 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 comprises entre 0 (le monde entier) et 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, les visiteurs verront une carte dans leur propre 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 de mosaïques 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 spécifié sous la forme d'un sous-tag de région Unicode à deux caractères (non numériques) mappant des valeurs ccTLD (domaine de premier niveau) à deux caractères familières. Consultez Détails de la couverture Google Maps Platform pour obtenir une liste des 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 emplacement pour la recherche, soit en incluant un emplacement dans le terme de recherche (record+stores+in+Seattle
), soit en incluant un paramètre center
et zoom
pour limiter 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 inclure 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 comprises entre 0 (le monde entier) et 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, les visiteurs verront une carte dans leur propre 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 de mosaïques 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 spécifié sous la forme d'un sous-tag de région Unicode à deux caractères (non numériques) mappant des valeurs ccTLD (domaine de premier niveau) à deux caractères familiè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 permet d'utiliser des ID de lieu au lieu de fournir un nom ou une adresse de lieu. Les ID de lieu sont un moyen stable d'identifier de manière unique 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 panorama, 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 ne sont pas limitées à des sources spécifiques.outdoor
limite les recherches aux collections extérieures. Les collections intérieures 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 les panoramas où il est possible de déterminer s'ils se trouvent à l'intérieur ou à l'extérieur. Par exemple, les PhotoSpheres ne sont pas renvoyées, car on ne sait pas si elles sont prises en intérieur ou en extérieur.