How can I add action to infobox which add location of pushpin to directions manager as waypoint? (Bing Maps V8 API)

Paweł Nowicki 1 Reputation point
2021-12-13T16:03:32.97+00:00

Hello I would appreciate if any of you give me advice how do I add function to add pushpin as waypoint to directions manager on click at action in infobox.

Here is directions maganer code which his visible near map:

Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
    var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
    directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel'), 
    drivingPolylineOptions: {strokeColor: 'white',strokeThickness: 4},});
    directionsManager.showInputPanel('directionsInputContainer');
    directionsManager.addWaypoint();
});

Here is info about pushpin: (on line 22 the action code for adding pushpin starts but it doesn't work at all)

var pin =  new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.42450655662612, 14.560102801018639),{
    title: 'pushpintitle',
    description: 'description',
    icon: 'https://cdn-icons-png.flaticon.com/512/1009/1009870.png',
    iconSize: { width: 15, height: 15 },
});
map.entities.push(pin);
//Create an infobox at the center of the map but don't show it.
infobox = new Microsoft.Maps.Infobox(Microsoft.Maps.Location(53.42450655662612, 14.560102801018639), {
    visible: false,
});
//Assign the infobox to a map instance.
infobox.setMap(map);
//Store some metadata with the pushpin.
pin.metadata = {
    title: 'this is pushpin 123',
    description: 'description',
    icon: 'https://cdn-icons-png.flaticon.com/512/1009/1009870.png',
    iconSize: { width: 15, height: 15 },
    actions: [
        { label: 'website', eventHandler: function () { open('https://muzeum.szczecin.pl'); } },
        { label: 'add as waypoint', eventHandler: function () { //here should be code but this doesnt work, could you help me what am I doing wrong? 
            directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel'),
            drivingPolylineOptions: {strokeColor: 'white',strokeThickness: 4},});
            directionsManager.showInputPanel('directionsInputContainer');
            directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
            var pinWaypoint = new Microsoft.Maps.Directions.Waypoint({ location: '53.42450655662612,14.560102801018639' });
            directionsManager.addWaypoint(pinWaypoint);
            var pinWaypointb = new Microsoft.Maps.Directions.Waypoint({ location: '53.42620529924751,14.560743548811836' });
            directionsManager.addWaypoint(pinWaypointb);
            //Calculate directions.
            directionsManager.calculateDirections();}
        },
    ]
};
//Add a click event handler to the pushpin.
Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

Thank you so much!

Windows Maps
Windows Maps
A Microsoft app that provides voice navigation and turn-by-turn driving, transit, and walking directions.
238 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. IoTGirl 2,961 Reputation points Microsoft Employee
    2021-12-13T18:26:50.107+00:00

    Take a look at "How to add a waypoint" as I believe it might help you identify your issue. https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/directionsaddwaypoint. When you want to "update" the route you will want to call the function to redraw the route. it looks like all of your code is a single execution on the pin clicked rather than an update to directions.

    0 comments No comments