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

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>