Hello,
Kentico
Google map web parts can't display directions by default, but you can use standard
Google Map API to display them. Here is an example, how to do it in Kentico CMS:
1) Open the
Master page tab of your root document and add following parameter to the
body tag:
onload="initialize()"
2) Define styles for your map in site's css stylesheet:
#map_canvas {
border: 2px solid #00BBE2;
width:596px;
height:400px;
}
3) Place a
Static text web part to a page and fill its
Text property with the code below:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var oldDirections = [];
var currentDirections = null;
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(39.605688,-99.84375),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: true,
mapTypeControl: false,
zoomControl: false,
streetViewControl: false,
scrollwheel: false,
scaleControl: false,
rotateControl: false,
disableDoubleClickZoom: true,
panControl: false
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var icon = '/left.png';
mark = new google.maps.MarkerImage(icon);
var markerOption = {
icon: mark
};
directionsDisplay = new google.maps.DirectionsRenderer({
'map': map,
'preserveViewport': false,
'draggable': false,
'markerOptions': markerOption
});
calcRoute();
}
function calcRoute() {
var start = 'USA, New York';
var end = 'USA, Los Angeles';
var waypts = [];
var request = {
origin:start,
destination:end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
<div id="map_canvas"></div>
Where the
start and
end variables can be filled with any city/address you want.
Best regards,
Jan Hermann