---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/routes_to_point.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/en/llms.txt
# Route to the point on the map
Open in CodeSandbox
You can put your placemark on the map at the appropriate point and let the user build a route to it.
The route starting point can be the user's current position, a search result on the map, or any selected point.
There are three possible route types: driving, using public transport or walking.
{% list tabs %}
- index.html
```html
Examples. Building routes to a selected point.
```
- routes_to_point.js
```js
ymaps.ready(function () {
/**
* The coordinates to build a route to.
* For example, set the coordinates of your office.
*/
var targetCoords = [55.752, 37.616],
// Initializing the map.
myMap = new ymaps.Map(
"map",
{
center: targetCoords,
zoom: 11,
},
{
// Limiting the number of search results.
searchControlResults: 1,
// Disabling autocentering at the found addresses.
searchControlNoCentering: true,
// Allowing buttons to have the necessary length.
buttonMaxWidth: 150,
}
),
// Placemark for the route destination point.
targetPoint = new ymaps.Placemark(
targetCoords,
{ iconContent: "Kremlin" },
{ preset: "islands#redStretchyIcon" }
),
// Getting references to the needed controls.
searchControl = myMap.controls.get("searchControl"),
geolocationControl = myMap.controls.get("geolocationControl"),
// Creating a drop-down list for selecting the route type.
routeTypeSelector = new ymaps.control.ListBox({
data: {
content: "How to get there",
},
items: [
new ymaps.control.ListBoxItem("Driving"),
new ymaps.control.ListBoxItem("Public transit"),
new ymaps.control.ListBoxItem("Walking"),
],
options: {
itemSelectOnClick: false,
},
}),
// Getting direct links to the list items.
autoRouteItem = routeTypeSelector.get(0),
masstransitRouteItem = routeTypeSelector.get(1),
pedestrianRouteItem = routeTypeSelector.get(2),
// Placemark for the route starting point.
sourcePoint,
// Variables for storing references to the current route.
currentRoute,
currentRoutingMode;
// Adding the destination point to the map.
myMap.geoObjects.add(targetPoint);
// Adding the created drop-down list to the map.
myMap.controls.add(routeTypeSelector);
// Subscribing to click events on drop-down list items.
autoRouteItem.events.add("click", function (e) {
createRoute("auto", e.get("target"));
});
masstransitRouteItem.events.add("click", function (e) {
createRoute("masstransit", e.get("target"));
});
pedestrianRouteItem.events.add("click", function (e) {
createRoute("pedestrian", e.get("target"));
});
/**
* Subscribing to events notifying of three ways of selecting the route starting point:
* click on the map, displaying search results, and geolocation.
*/
myMap.events.add("click", onMapClick);
searchControl.events.add("resultshow", onSearchShow);
geolocationControl.events.add("locationchange", onGeolocate);
/**
* The following functions respond to the necessary events, remove the previous results from the map,
* redefine the departure point, and initiate route recalculation.
*/
function onMapClick(e) {
clearSourcePoint();
sourcePoint = new ymaps.Placemark(
e.get("coords"),
{ iconContent: "From here" },
{ preset: "islands#greenStretchyIcon" }
);
myMap.geoObjects.add(sourcePoint);
createRoute();
}
function onSearchShow(e) {
clearSourcePoint(true);
sourcePoint = searchControl.getResultsArray()[e.get("index")];
createRoute();
}
function onGeolocate(e) {
clearSourcePoint();
sourcePoint = e.get("geoObjects").get(0);
createRoute();
}
function clearSourcePoint(keepSearchResult) {
if (!keepSearchResult) {
searchControl.hideResult();
}
if (sourcePoint) {
myMap.geoObjects.remove(sourcePoint);
sourcePoint = null;
}
}
/**
* Function that creates a route.
*/
function createRoute(routingMode, targetBtn) {
/**
* If 'routingMode' was passed, it means the call is triggered by a click on a route selection item,
* so we remove the selection from the other item, select this item, and close the list.
* Otherwise, we recalculate the existing route, or don't do anything.
*/
if (routingMode) {
if (routingMode == "auto") {
masstransitRouteItem.deselect();
pedestrianRouteItem.deselect();
} else if (routingMode == "masstransit") {
autoRouteItem.deselect();
pedestrianRouteItem.deselect();
} else if (routingMode == "pedestrian") {
autoRouteItem.deselect();
masstransitRouteItem.deselect();
}
targetBtn.select();
routeTypeSelector.collapse();
} else if (currentRoutingMode) {
routingMode = currentRoutingMode;
} else {
return;
}
// If the route starting point hasn't been selected yet, we don't do anything.
if (!sourcePoint) {
currentRoutingMode = routingMode;
geolocationControl.events.fire("press");
return;
}
// Deleting the old route.
clearRoute();
currentRoutingMode = routingMode;
// Creating a route with the new type from the starting point to the destination.
currentRoute = new ymaps.multiRouter.MultiRoute(
{
referencePoints: [sourcePoint, targetPoint],
params: { routingMode: routingMode },
},
{
boundsAutoApply: true,
}
);
// Adding the route to the map.
myMap.geoObjects.add(currentRoute);
}
function clearRoute() {
myMap.geoObjects.remove(currentRoute);
currentRoute = currentRoutingMode = null;
}
});
```
{% endlist %}