par

Comment puis-je intégrer en HTML une carte Google Maps sur mon site internet ?

2 Réponses

+1 validé
par

Pour intégrer une carte Google Maps sur un site internet, en HTML, sans utiliser l'API de Google Maps, procédez comme suit :

  • Allez sur le site Google Maps.
  • Recherchez l'adresse postale.
  • Cliquez sur l'icône Partager.
  • Cliquez sur Intégrer une carte.
  • Cliquez sur Copier le contenu HTML.

Vous devez maintenant coller le code HTML à l'endroit désiré du code source de votre site Web pour y intégrer la carte Google Maps.

Voici à quoi ressemble le code HTML d'une carte Google Maps :

<iframe 
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11379892.43006769!2d-6.937978056419837!3d45.865426267235065!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd54a02933785731%3A0x6bfd3f96c747d9f7!2sFrance!5e0!3m2!1sfr!2sfr!4v1587211230198!5m2!1sfr!2sfr"
width="600"
height="450"
frameborder="0"
style="border:0;"
allowfullscreen=""
aria-hidden="false"
tabindex="0">
</iframe>

Remarque : Vous noterez les arguments HTML, dont les valeurs sont en pixels, width et height, qui permettent de modifier la taille de la carte Google Maps lorsque vous l'intégrez dans votre site Web.

+1 validé
par

Si vous voulez intégrer à votre site Web une carte Google Maps, avec d'avantage de fonctionnalités que la solution proposée par Hervé, vous devez utiliser l'API de Google Maps.

Vous devez préalablement obtenir une clé d'accès à l'API Google Maps, pour cela référez-vous cette question.

Voici comment intégrer Google Maps à son site Web avec l'API Maps JavaScript API :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comment intégrer une carte Google Maps avec l'API ?</title>
</head>
<body>
<div id="map" style="width:100%;height:500px;"></div>
<script>
function googleMap() {
var mapVar= {
	center:new google.maps.LatLng(48.866667,2.333333),
	zoom:12,
	mapTypeId: 'roadmap'
};
var map = new google.maps.Map(document.getElementById("map"),mapVar);
var champ_elysees_Position = {lat: 48.869745,lng: 2.307946};
var marker = new google.maps.Marker({
	position: champ_elysees_Position,
	map: map,
	title: 'Champ Elysées'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=VOTRE_CLEF_ICI&callback=googleMap"></script>
</body>
</html>

Remarque : L'utilisation de l'API pour intégrer une carte Google Maps sur votre site Web vous permet de personnaliser la carte. Vous pouvez par exemple modifier les couleurs de la carte.

Remarque : Vous trouverez d'avantage d'informations sur l'API de Google Maps via cette page de Google.

Offre Sponsorisée

Ailleurs sur le Web

Lecture Recommandée

Edward Snowden - Mémoires vives

"Je m'appelle Edward Joseph Snowden. Avant, je travaillais pour le gouvernement mais aujourd'hui je suis au service de tous. Il m'a fallu près de trente ans pour saisir la différence et quand j'ai compris, ça m'a valu quelques ennuis au bureau."

L'homme qui a tout risqué pour dénoncer la surveillance globale, ou l'extraordinaire histoire d'un garçon brillant qui a grandi "en ligne", d'un homme devenu espion, puis lanceur d'alerte, et, en exil, la consciencce de l'internet.

Mémoires vives est un témoignage exceptionnel, également disponible en numérique.

Sujets Connexes

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...