Amazing APIs | Maps, Autocomplete, Journey planning | CombiTrip

A great alternative for the paid Google APIs. CombiTrip offers an APIs for maps, autocomplete an journey planning. For small non-commercial use it is free for the first 500 daily requests. You can sign up here. For commercial use please contact info@combitrip.com. Please find the documentation below.

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="../js/combitrip.maps.js"></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);
    });
                    
                

Encoded

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);
        });
                    
                

Route

Example

This example show how to draw the route on map by using the default route service.

                    
        new ABOSM("osm-map", {
            center: [40.744190, -73.993200],
            zoom: 10
        }).ready(function(inst){
            inst.route( [ [40.744190, -73.993200], [40.733440, -74.006070]], {
                showItinerary: false,
                lineOptions: {
                    styles: [ 
                        {color: '#85a9dd', weight: 4 }
                    ]
                }
            });        
        });
                    
                

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);
        });
                    
                

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');
            inst.fitBounds(marker);        
        });
                    
                

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);
        });
                    
                

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();
        }
                    
                

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