Pouvoir intégrer un calcul d'itinéraire (Google Maps) dans un article.

Documentation : https://contrib.spip.net/4995

.gitattributes

@@ -438,6 +438,8 @@ modeles/documentsjoints.html -text
 modeles/documentsjoints_inc.html -text
 modeles/emb_pdf.html -text
 modeles/formulaire_inscription_newsletter.html -text
+modeles/itineraire.html -text
+modeles/itineraire.js -text
 modeles/mod_lien_detail.html -text
 modeles/popup.html -text
 modeles/secteur_pdf.html -text

modeles/itineraire.html

+<style type="text/css">
+#itineraire_container #itineraire_map{width:100%;height:500px;margin:auto;}
+#itineraire_container #itineraire_panel{width:100%;margin:auto;}
+</style>
+<div id="itineraire_container">
+	<div id="itineraire_destinationForm">
+		<form action="" method="get" name="direction" id="itineraire_direction">
+			<label for="itineraire_origin">Point de départ&nbsp;:</label>
+			<input type="text" name="origin" id="itineraire_origin" />
+			<label for="itineraire_destination">Destination&nbsp;:</label>
+			<input type="text" name="destination" id="itineraire_destination"[ value="(#ENV{destination})" readonly="readonly"] />
+			<input type="button" value="Calculer l'itinéraire" onclick="javascript:calculate_itineraire()" />
+		</form>
+	</div>
+	<div id="itineraire_panel"></div>
+	<div id="itineraire_map"[ data-title="(#ENV{destination})"][ data-lat="(#ENV{lat})"][ data-lng="(#ENV{lng})"]>
+		<p>Veuillez patienter pendant le chargement de la carte...</p>
+	</div>
+</div>
+
+<!-- Include Javascript -->
+<script async defer src="https://maps.googleapis.com/maps/api/js?[key=(#ENV{apikey})&]callback=initialize_map_itineraire"
+  type="text/javascript"></script>
+<script type="text/javascript" src="#CHEMIN{modeles/itineraire.js}"></script>

modeles/itineraire.js

+var map;
+var panel;
+var initialize_map_itineraire;
+var calculate_itineraire;
+var direction;
+
+initialize_map_itineraire = function(){
+  var latLng = new google.maps.LatLng($('#itineraire_map').data("lat") || 44.330642, $('#itineraire_map').data("lng") || -1.225703); // Correspond au coordonnées de Lille
+  var myOptions = {
+    zoom      : 14, // Zoom par défaut
+    center    : latLng, // Coordonnées de départ de la carte de type latLng 
+    mapTypeId : google.maps.MapTypeId.TERRAIN, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
+    maxZoom   : 20
+  };
+  
+  map      = new google.maps.Map(document.getElementById('itineraire_map'), myOptions);
+  panel    = document.getElementById('itineraire_panel');
+  
+  var marker = new google.maps.Marker({
+    position : latLng,
+    map      : map,
+    title    : $('#itineraire_map').data("title") || 'Perdu'
+    //icon     : "marker_lille.gif" // Chemin de l'image du marqueur pour surcharger celui par défaut
+  });
+  
+  
+  direction = new google.maps.DirectionsRenderer({
+    map   : map,
+    panel : panel // Dom element pour afficher les instructions d'itinéraire
+  });
+
+};
+
+calculate_itineraire = function(){
+    origin      = document.getElementById('itineraire_origin').value; // Le point départ
+    destination = document.getElementById('itineraire_destination').value; // Le point d'arrivé
+    if(origin && destination){
+        var request = {
+            origin      : origin,
+            destination : destination,
+            travelMode  : google.maps.DirectionsTravelMode.DRIVING // Mode de conduite
+        }
+        var directionsService = new google.maps.DirectionsService(); // Service de calcul d'itinéraire
+        directionsService.route(request, function(response, status){ // Envoie de la requête pour calculer le parcours
+            if(status == google.maps.DirectionsStatus.OK){
+                direction.setDirections(response); // Trace l'itinéraire sur la carte et les différentes étapes du parcours
+            }
+        });
+    }
+};
\ No newline at end of file

paquet.xml

 <paquet
 	prefix="soyezcreateurs"
 	categorie="squelette"
-	version="4.3.5"
+	version="4.3.6"
 	etat="stable"
 	compatibilite="[3.1.8;3.2.*]"
 	logo="img_pack/soyezcreateurs_48.png"