
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Combitrip API - Maps: Route</title>
</head>
<body>
    <div id="osm-map" style="width: 100%; height: 100%;"></div>

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://www.combitrip.org/api/public/combitrip.maps.min.js?key=32a61ca69e22441db052df11ab8ba02b"></script>

    <script>
        new ABOSM("osm-map", {
            center: [52.248624, 4.669728],
            zoom: 10
        }).ready(function(inst){
            var origin_latlng = [52.248624, 4.669728];
            var destination_latlng = [52.338871, 4.825088];

            var mkOrig = inst.iconMarker(origin_latlng, '/images/fromA.png',  { iconSize: [35, 45], iconAnchor: [17, 45], addToMap: false });
            mkOrig.attachPopup('START ROUTE<span  style="color:red">!</span>');

            var mkDest = inst.iconMarker(destination_latlng, '/images/toB.png',  { iconSize: [35, 45], iconAnchor: [17, 45] , addToMap: false });
            mkDest.attachPopup('END ROUTE<span  style="color:red">!</span>');

            inst.route( [ origin_latlng, destination_latlng], {
                showItinerary: false,
                originMarker: mkOrig,
                destinationMarker: mkDest,
                lineOptions: {
                    styles: [
                        {color: '#85a9dd', weight: 4 }
                    ]
                }
            });
        });
    </script>

</body>