---
description: googlemapsembed
---

# Google Maps

{% hint style="danger" %}
Afin de garantir le respect du consentement exprimé par les utilisateurs du site il est nécessaire de respecter une syntaxe, différente de celle qui est proposée par le site Google Maps, pour incorporer une carte Google Maps.
{% endhint %}

Le site Google Maps propose un code pour intégrer une carte sur son site web

<figure><img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FsY3r4FtgDVNEHP5wOrnN%2FCapture%20d%E2%80%99e%CC%81cran%202023-04-13%20a%CC%80%2014.21.59.png?alt=media&#x26;token=b211d2bb-b6b4-44ca-a674-35028577169b" alt=""><figcaption></figcaption></figure>

Voici un exemple de code d'intégration qu'il propose :&#x20;

{% code overflow="wrap" %}
```html
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d5064.032455022417!2d3.132354!3d50.608236!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c2d64ff3ba613f%3A0x3bc435cbb0d2198e!2sUniversit%C3%A9%20Gustave%20Eiffel%20-%20Campus%20de%20Lille%20(ex%20Ifsttar)!5e0!3m2!1sfr!2sfr!4v1681388309153!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
```
{% endcode %}

**Il faut remplacer ce code par le code suivant** :&#x20;

{% code overflow="wrap" %}
```html
<div class="googlemapsembed" data-url="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2532.016250140981!2d3.130164815834383!3d50.60823557949744!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c2d64ff3ba613f%3A0x3bc435cbb0d2198e!2sUniversit%C3%A9%20Gustave%20Eiffel%20(ex%20Ifsttar)!5e0!3m2!1sfr!2sfr!4v1600851249955!5m2!1sfr!2sfr" width="600" height="450" allowfullscreen></div>
```
{% endcode %}

Avec comme paramètres :&#x20;

* **data-url** = "l’ identifiant de la carte" (dans notre exemple c'est ce qui commence après **?pb=**&#x20;
* **width** = "largeur de la carte"
* **height** = "hauteur de la carte"
* **allowfullscreen** si vous souhaitez que l'on puisse ouvrir la carte en grand sur le site Google maps (ne rien mettre si vous ne voulez pas).
