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
-
Polyline
Example Encoded #1 Encoded #2 With Markers -
Markers
Example Marker with Popup Custom Marker -
Others
Dynamic Add / Remove
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);
});
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);
});
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);
});
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());
});
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);
});
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);
});
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);
});
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();
}
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 |