CombiTrip API
Request CombiTrip API key to use in your projects!
CombiTrip API Documentaion

Smart API services

CombiTrip offers a Maps API (worldwide), autocomplete API (worldwide), routing API (worldwide) and a journey planner API for public transportation (on demand only). We offer a free tier of 500 credits per day in return for a link to CombiTrip from your homepage. This free tier helps small businesses and other small projects to get started without having to sign up for a paid service. We totally understand if people don’t like to sign-up for a paid google account when your API use is relatively small, therefore we are happy to offer this alternative. We don't mind if you use the API commercial or non-commercial as long as your project makes this world a little better and nicer. If you use it for projects that are against our values (e.g.: racism, illegal activities, spreading of fake news, (political left or right) extremism) your account will be deleted at our discretion. After you sign-up for a key please make sure to place the link at your homepage to CombiTrip within 2 weeks! We help each other just like in the old days! Please find below a large variety of examples. Simply copy paste the code below each example and put your own key in it and you are ready to go! Below you can find the maps and autocomplete APIs. If you would like to use the routing API or journey planner API please get in touch with us by email. We also offer dedicated APIs and custom build APIs, also please get in touch with us by email if you are interested.

Maps API

Required Files

You need include the files below to work properly.

Scripts

            
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <!-- Or load your jQuery version instead -->
    <script src="https://combitrip.com/api/public/js/combitrip.maps.min.js?key=<your-api-key>"></script>

Polyline

Example

Simple example of drawing polygon on map.

                    
    new ABOSM("osm-map", {
        center: [40.641113, -8.654473],
        zoom: 10
    }).ready(function(inst){
        var point_a = [40.641113, -8.654473], point_b = [40.640009, -8.74958];
        var line = inst.polyline(point_a, point_b, { color: '#85a9dd', weight: 4 });
        inst.fitBounds(line);
    });
Map Options | Polyline Options
Save Example Page Show Full Code

Encoded #1

This example show how to draw encoded polyline on map.

                    
        new ABOSM("osm-map", {
            center: [40.641113, -8.654473],
            zoom: 10
        }).ready(function(inst){
            var point_a = [40.641113, -8.654473], 
                point_b = [40.640009, -8.74958],
                arr = [point_a, point_b];
                encoded = ABOSMUtils.encodePath(arr);
            var line = inst.polylineEncoded(encoded);
            inst.fitBounds(line);
        });
Map Options
Save Example Page Show Full Code

Encoded #2

This example show how to draw encoded polyline on map.

                    
        new ABOSM("osm-map", {
            center: [40.641113, -8.654473],
            zoom: 10
        }).ready(function(inst){
            var encoded = '}u`wFliys@zElqQ';
            var line = inst.polylineEncoded(encoded);
            inst.fitBounds(line);
        });
Map Options
Save Example Page Show Full Code

Polyline with markers

This example show how to draw the polyline and markers on map.

                    
        new ABOSM("osm-map", {
            center: [40.641113, -8.654473],
            zoom: 10
        }).ready(function(inst){
            var point_a = [40.641113, -8.654473], point_b = [40.640009, -8.74958];
            // 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());
        });
Map Options
Save Example Page Show Full Code

Markers

Example

Create the single marker on map.

                    
        new ABOSM("osm-map", {
            center: [40.641113, -8.654473],
            zoom: 10
        }).ready(function(inst){
            var marker = inst.marker([40.641113, -8.654473]);
            inst.fitBounds(marker);
        });
Map Options | Marker Options
Save Example Page Show Full Code

Marker with Popup

Create the single marker on map.

                    
        new ABOSM("osm-map", {
            center: [40.641113, -8.654473],
            zoom: 10
        }).ready(function(inst){
            var marker = inst.marker([40.641113, -8.654473]);
            marker.attachPopup('Popup Content');
            marker.attachPopup('<h3>Popup Content!</h3><p><strong>This</strong> is <span style="color:red">html</span> example</p>');
            inst.fitBounds(marker);        
        });
Map Options | Marker Options
Save Example Page Show Full Code

Custom Marker

                    
        new ABOSM("osm-map", {
            center: [40.641113, -8.654473],
            zoom: 10
        }).ready(function(inst){
            marker = inst.iconMarker([40.641113, -8.654473], '../images/fromA.png',  { iconSize: [35, 45], iconAnchor: [17, 45] });
            inst.fitBounds(marker);
        });
Map Options | Marker Options
Save Example Page Show Full Code

Others

Dynamic Add / Remove

                    
        var point_a = [40.641113, -8.654473], point_b = [40.640009, -8.74958];
        var UNIQUE_MARKER = 'mymarker', UNIQUE_CIRCLE = 'mycircle', UNIQUE_POLYLINE = 'mypolyline', UNIQUE_POLYLINE_ENCODED = 'mypolylineEncoded';
        var MAPTEST;
        
        new ABOSM("osm-map", {
            center: point_a,
            zoom: 14
        }).ready(function(inst){
            MAPTEST = inst;
        });
        
        function addMarker(){
            MAPTEST.marker(point_a, { unique: UNIQUE_MARKER });
        }
        
        function removeMarker(){
            MAPTEST.findObj(UNIQUE_MARKER).removeObj();
        }
        
        function addCircle(){
            MAPTEST.circle(point_a, { 
                unique: UNIQUE_CIRCLE,
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: 500                
            });
        }
        
        function removeCircle(){
            MAPTEST.findObj(UNIQUE_CIRCLE).removeObj();
        }
        
        function addPolyline(){
            MAPTEST.polyline(point_a, point_b, { unique: UNIQUE_POLYLINE });
        }
        
        function removePolyline(){
            MAPTEST.findObj(UNIQUE_POLYLINE).removeObj();
        }     
        
        function addPolylineEncoded(){
            var arr = [point_a, point_b];
            var encoded = ABOSMUtils.encodePath(arr);
            MAPTEST.polylineEncoded(encoded, { unique: UNIQUE_POLYLINE_ENCODED });
        }
        
        function removePolylineEncoded(){
            MAPTEST.findObj(UNIQUE_POLYLINE_ENCODED).removeObj();
        }
Map Options
Save Example Page Show Full Code

Autocomplete API

Required Files

You need include the files below to work properly.

Scripts

            
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <!-- Or load your jQuery version instead -->
    <script src="combitrip.geocomplete.js"></script>

Initialization

Html:

            
    <input type="text" placeholder="Anywhere..." id="location" />

Javascript:

            
    $(function () {
        $("#location").abgeo(<options>);
    }

You can bind the change event:

            
    $(function () {
        $("#location").abgeo(<options>).bind("abgeo:place_changed", function(event, result) {
            // code
        });
    }

Settigns for Autocomplete:

Property Type Default Description
api string Required. The url to api which returns the results of search.
apiKey string The apiKey for api.
searchDelay integer 250 Delay for the start request on typing.
showCurrentLoc boolean true Show/Hide the option for current location in popup autocompelte.
resultRenderLimit integer 8 The number of results to parse into popup autocomplete.
getDisplayText function internal The function to return the display text for the result item.
geocoder object The settings for geocoder of user location

Settigns for geocoder of user location:

Property Type Default Description
api string Required. The url to geocoder api.
onBeforeDetection function Event trigger on before detect the user location (when showCurrentLoc: true)
onAfterInit function Events trigger after the internal geocoder init
onError function Event trigger on error
onGeocoderSuccess function Event trigger on success
Save Example Page Show Full Code

>