Epoly wrong position
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 100%;
}
JavaScript
var map;
var line;
var first_path;
function initMap() {
pointA = new google.maps.LatLng(50.931300, 4.226360);
pointB = new google.maps.LatLng(48.858370, 2.294481);
var myOptions = {
zoom: 7,
center: pointA
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
// Instantiate a directions service.
var directionsService = new google.maps.DirectionsService,
directionsDisplay = new google.maps.DirectionsRenderer({
map: map
}),
markerA = new google.maps.Marker({
position: pointA,
title: "point A",
label: "A",
map: map
}),
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "B",
map: map
});
// get route from A to B
calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
directionsService.route({
origin: pointA,
destination: pointB,
avoidTolls: true,
avoidHighways: false,
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
//directionsDisplay.setDirections(response);
console.debug(response);
first_path = response.routes[0].overview_path;
// Make polyline on the path
line = new google.maps.Polyline({
path: first_path,
strokeColor: 'black',
strokeOpacity: 1,
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
strokeColor: '#393',
strokeOpacity: 0.8
},
...