
<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: Shapes Polyline with Marker</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 point_a = [52.248624, 4.669728], point_b = [52.338871, 4.825088];
            // create line
            var line = inst.polyline(point_a, point_b, { color: '#85a9dd', weight: 4 });

            // create markers
            var marker1 = inst.marker(point_a), marker2 = inst.marker(point_b);

            // create the group
            var group = new L.featureGroup([marker1, marker2, line]);

            // fit bounds
            inst.fitBounds(group.getBounds());
        });
    </script>
    
</body>