Google Maps permet l’intégration d’une carte personnalisée sur son propre site web. Il faut pour cela utiliser un code html fourni par l’application de cartographie de Google.

Après avoir fait une recherche sur Google Maps, vous pouvez obtenir le code HTML qui permet l’affichage de la carte.
Dans la fenêtre de gauche, choisissez Partager -> Intégrer la carte pour récupérer le code.
Vous pouvez personnaliser la taille de la carte.


un plan de Beauvais

Une autre solution est de se rendre sur le site : https://maps-generator.com/fr.
Pour utiliser ce générateur de carte, vous aurez besoin d’une clé Google Maps API (gratuite).
Suivez ces indications pour l’obtenir.
Maintenant, vous pouvez placer un marqueur et personnaliser votre carte.

Exemple 

/* commentaire */

Comment faire ? 

Vous trouverez les explications dans les commentaires intégrés au code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* à intégrer dans l'en-tête */
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=cle_google_maps_api '></script>
/* taille de la carte (carte_rotangy) */
<div style='overflow:hidden;height:600px;width:800px;'>
<div id='carte_rotangy' style='height:600px;width:800px;'>
</div>
/* css */
<style>
#carte_rotangy img{max-width:none!important;background:none!important}
</style>
</div> 
/* intégration de la carte */
<a href='https://embedmaps.net'>google maps html widget</a> 	
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=b5f4063c602da63b0b5c2bb3bad34454f787960e'></script>
<script type='text/javascript'>function init_map()
{var myOptions = {zoom:12,center:new google.maps.LatLng(49.5817367,2.081601399999954), //centrage de la carte
mapTypeId: google.maps.MapTypeId.ROADMAP};	// type de carte
map = new google.maps.Map(document.getElementById('carte_rotangy'), 
myOptions);
/* un marqueur avec ses coordonnées */
marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(49.5817367,2.081601399999954)});
/* contenu de l'info bulle */
infowindow = new google.maps.InfoWindow({
content:'<strong>Anne Grard & Patrice Blondel</strong><br>2 bis, rue des vaches 60360 Rotangy'});
google.maps.event.addListener(marker, 'click', function()
{infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
</script>