Skip to content

Instantly share code, notes, and snippets.

@AdrienVH
Last active August 22, 2017 10:46
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save AdrienVH/11289735 to your computer and use it in GitHub Desktop.
Save AdrienVH/11289735 to your computer and use it in GitHub Desktop.
Utiliser Google Maps pour calculer un itinéraire entre deux adresses, et l'afficher dans une carte OpenLayers
/*
Pré-requis : charger la librairie Google Maps, son module Geometry, et la librairie OpenLayers :
<script src="https://maps.googleapis.com/maps/api/js?key=...&libraries=geometry&sensor=false"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
*/
// Carte
var cartographie = new OpenLayers.Map('carte'); // <div id="carte"></div>
var couche_osm = new OpenLayers.Layer.OSM('OSM');
cartographie.addLayer(couche_osm);
// Adresses
var origin = '191 rue Saint-Jacques, Paris';
var destination = '37 bd Romain Rolland, Montrouge';
// Itinéraire
var directionsService = new google.maps.DirectionsService();
directionsService.route({origin:origin, destination:destination, travelMode:google.maps.TravelMode.DRIVING}, function(result, status){
if(status == google.maps.DirectionsStatus.OK)
{
// Ajout d'une couche à la carte
var styleMap = new OpenLayers.StyleMap({'default':new OpenLayers.Style({strokeWidth:2, strokeColor:'red'})});
var couche_itineraires = new OpenLayers.Layer.Vector('Itinéraire', {styleMap:styleMap});
cartographie.addLayer(couche_itineraires);
// Parcours des points de l'itinéraire
var encoded_polyline = result['routes'][0]['overview_polyline']['points'];
var decoded_polyline = google.maps.geometry.encoding.decodePath(encoded_polyline);
var points = new Array();
for(var i in decoded_polyline)
{
var lonlat = new OpenLayers.LonLat(decoded_polyline[i].lng(), decoded_polyline[i].lat()).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:3857"));
var point = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
points.push(point);
}
// Ajout de l'itinéraire à la couche
couche_itineraires.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points))]);
// Centrage de la carte sur l'emprise de la couche
cartographie.zoomToExtent(couche_itineraires.getDataExtent());
}
});
@AboubakarRayiz
Copy link

So great !!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment