How can I select which waypoints have markers attached?

Question

Background

I'm currently working on a project where when a location is selected from a dropdown, or similar input, a marker is inserted onto a map at the corresponding coordinates. It also supports navigation between selected points. These points may have markers on the map or may not, depending on what the user selected prior to creating the navigation. In this project, I'm using Leaflet for the map display and Leaflet Routing Machine for point to point navigation on the map.

Question

The issue that I'm coming across is that, when I attempt to create navigation between points, I am unable to specify which waypoints that I want to have markers on. This is an issue because this will cause overlapping markers at a given location. So, is there a way to only create markers at selected waypoints when creating a route using the Leaflet Routing Machine?

Example

Here's an example reproducing the issue on Codepen. This isn't a super great example because they don't have different icons, but when they do it's a bit more visible.

Here is the (currently invalid) Javascript that shows how I add in the points.

function getDirections(waypoints, mode) {

    if (typeof mode === 'undefined') {
        mode = 'driving'
    }

    routingControl.getRouter().options.profile = 'mapbox/' + mode;
    routingControl.setWaypoints(waypoints);

    // I'm also trying to figure out how to find if the marker is sitting in the same spot as another, 
    // but that's another question for another time.
    if (MARKERS EXIST AT EACH POINT) {
        routingControl.options.createMarker = function () {
            return null;
        }

    } else if (MARKERS EXIST AT SOME POINTS) {
        // The resolution to the issue that I'm trying to solve would sit here

    } else {
        routingControl.options.createMarker = function() {
            return L.marker(wp.latLng);
        }
    }

    var routeBlock = routingControl.onAdd(map);
    $('#directions-display-pane')
        .html(routeBlock)
        .append('<div class="inline-form">' +
                    '<button id="directions-back-button" class="expanded">Back</button>' +
                    '<div class="icon create-link link" tooltip="Create link"><i class="fa fa-link" aria-hidden="true"></i></div>' +
                '</div>')
        .removeClass('hidden');
}

Thank you in advance to anyone that has any ideas!