function calculateRouteFromAtoB(platform) { var router = platform.getRoutingService(), routeRequestParams = { mode: 'fastest;car', representation: 'display', routeattributes: 'waypoints,summary,shape,legs', maneuverattributes: 'direction,action', waypoint0: '52.5160,13.3779', // Brandenburg Gate waypoint1: '52.5206,13.3862' // Friedrichstraße Railway Station }; router.calculateRoute( routeRequestParams, onSuccess, onError ); } function onSuccess(result) { var route = result.response.route[0]; addRouteShapeToMap(route); addManueversToMap(route); // ... etc. } function onError(error) { alert('Can\'t reach the remote server'); } // set up containers for the map + panel var mapContainer = document.getElementById('map'); //Step 1: initialize communication with the platform // In your own code, replace variable window.apikey with your own apikey var platform = new H.service.Platform({ 'apikey': 'ElOm77yzgasZvSGlnpiqwE-D5sbtTwgMYzSFiBV-6pc' }); var defaultLayers = platform.createDefaultLayers(); //Step 2: initialize a map - this map is centered over Berlin var map = new H.Map(mapContainer, defaultLayers.vector.normal.map, { center: { lat: 52.5206, lng: 13.3862 }, zoom: 13, pixelRatio: window.devicePixelRatio || 1 }); // add a resize listener to make sure that the map occupies the whole container window.addEventListener('resize', () => map.getViewPort().resize()); var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); // Create the default UI components var ui = H.ui.UI.createDefault(map, defaultLayers); /** * Creates a H.map.Polyline from the shape of the route and adds it to the map. * @param {Object} route A route as received from the H.service.RoutingService */ function addRouteShapeToMap(route) { var lineString = new H.geo.LineString(), routeShape = route.shape, polyline; routeShape.forEach(function (point) { var parts = point.split(','); lineString.pushLatLngAlt(parts[0], parts[1]); }); polyline = new H.map.Polyline(lineString, { style: { lineWidth: 4, strokeColor: '#0baf9a' } }); // Add the polyline to the map map.addObject(polyline); // And zoom to its bounding rectangle map.getViewModel().setLookAtData({ bounds: polyline.getBoundingBox() }); } /** * Creates a series of H.map.Marker points from the route and adds them to the map. * @param {Object} route A route as received from the H.service.RoutingService */ function addManueversToMap(route) { var svgMarkup = '' + '' + '', dotIcon = new H.map.Icon(svgMarkup, { anchor: { x: 8, y: 8 } }), group = new H.map.Group(), i, j; // Add a marker for each maneuver for (i = 0; i < route.leg.length; i += 1) { for (j = 0; j < route.leg[i].maneuver.length; j += 1) { // Get the next maneuver. maneuver = route.leg[i].maneuver[j]; // Add a marker to the maneuvers group var marker = new H.map.Marker({ lat: maneuver.position.latitude, lng: maneuver.position.longitude }, { icon: dotIcon }); marker.instruction = maneuver.instruction; group.addObject(marker); } } // Add the maneuvers group to the map map.addObject(group); } /** * Creates a series of H.map.Marker points from the route and adds them to the map. * @param {Object} route A route as received from the H.service.RoutingService */ function addWaypointsToPanel(waypoints) { var nodeH3 = document.createElement('h3'), waypointLabels = [], i; for (i = 0; i < waypoints.length; i += 1) { waypointLabels.push(waypoints[i].label) } nodeH3.textContent = waypointLabels.join(' - '); } Number.prototype.toMMSS = function () { return Math.floor(this / 60) + ' minutes ' + (this % 60) + ' seconds.'; }; // Now use the map as required... calculateRouteFromAtoB(platform);