google-multiple-route.js

import {Platform} from 'ionic-framework/ionic';
import {Injectable} from "angular2/core";
declare let google:any;

import {Observable, ReplaySubject} from 'rxjs/Rx';

@Injectable()
export class Map {

    map: any;

    list$: ReplaySubject<any>;
    _routes: Array<any>;

    constructor (private platform: Platform)
    {
        this._routes = [];
        this.list$ = new ReplaySubject();
    }

    loadMap (lat:number, lon:number, zoom?:number)
    {
        if (!zoom)
            zoom = 15;

        this.platform.ready().then(() => {

            let latLng = new google.maps.LatLng(lat, lon);

            let mapOptions = {
                center: latLng,
                zoom: zoom,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            this.map = new google.maps.Map(document.getElementById("map"), mapOptions);

            this.list$.subscribe(row => {
                this.add(row);
                this.setBoundForAll();
            });
        });
    }

    loadGeoMap ()
    {
        this.platform.ready().then(() => {

            let options = {timeout: 10000, enableHighAccuracy: true};

            navigator.geolocation.getCurrentPosition(

                (position) => {

                    this.loadMap(position.coords.latitude, position.coords.longitude, 15);
                },

                (error) => {
                    //console.log(error);
                }, options
            );
        });
    }

    protected add (row)
    {
        let pickupMarker  = this.addMarker(true, row.pickup_address.latitude, row.pickup_address.longitude);
        let dropoffMarker = this.addMarker(false, row.dropoff_address.latitude, row.dropoff_address.longitude);

        this.addEvent(pickupMarker, row);
        this.addEvent(dropoffMarker, row);
    }

    addMarker(isPickup:boolean, lat:number, lon:number)
    {
        let latLng = new google.maps.LatLng(lon, lat);

        let marker = new google.maps.Marker({
            map: this.map,
            icon: isPickup ? 'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_greenP.png' : 'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_redD.png',
            animation: google.maps.Animation.DROP,
            position: latLng
        });

        return marker;
    }

    addEvent (marker, row)
    {
        let mapClass = this;

        let event = google.maps.event.addListener(marker, 'click', function()
        {
            console.log('click event');
            console.log(row.title);
            mapClass.buildRoute(row);
        });

        return event;
    }


    buildRoute = function (row)
    {
        this.routeResetActiveAll();

        if (this.isRouteExist(row))
        {
            console.log('found');
            this.routeActive(row);
            return; // no need to build route again
        }

        let mapClass = this;
        let directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
        let directionsService = new google.maps.DirectionsService();

        let start = new google.maps.LatLng(row.pickup_address.longitude, row.pickup_address.latitude);
        let end = new google.maps.LatLng(row.dropoff_address.longitude, row.dropoff_address.latitude);

        directionsDisplay.setMap(this.map);

        let bounds = new google.maps.LatLngBounds();
        bounds.extend(start);
        bounds.extend(end);
        this.map.fitBounds(bounds);

        let request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.WALKING
        };

        directionsService.route(request, function(response, status)
        {
            if (status == google.maps.DirectionsStatus.OK)
            {
                directionsDisplay.setDirections(response);
                
                mapClass.routeResetActiveAll();
                mapClass.addRoute(row, directionsDisplay);
                mapClass.routeActive(row);

                //directionsDisplay.polylineOptions.strokeColor = 'yellow';
                console.log(directionsDisplay);
                mapClass.test('inside callcback');
                mapClass.test(response);

            }
        });

        return;
    };

    private setBoundForAll ()
    {
        let bounds = new google.maps.LatLngBounds();

        this.list$.subscribe(row => {

            let start = new google.maps.LatLng(row.pickup_address.longitude, row.pickup_address.latitude);
            let end = new google.maps.LatLng(row.dropoff_address.longitude, row.dropoff_address.latitude);

            bounds.extend(start);
            bounds.extend(end);
        });

        this.map.fitBounds(bounds);
    }

    private isRouteExist (row)
    {
        return (this._routes[row.slug]);
    }

    private addRoute (row, route)
    {
        this._routes[row.slug] = route;
    }

    private getRoute (row)
    {
        return this._routes[row.slug];
    }

    private routeActive (row)
    {
        let route = this.getRoute(row);

        route.setOptions({
            polylineOptions: {
                strokeColor: 'yellow'
            }
        });
    }

    private routeNotActive (row)
    {
        let route = this.getRoute(row);

        route.setOptions({
            polylineOptions: {
                strokeColor: 'red'
            }
        });
    }

    private routeResetActiveAll ()
    {
        console.log('resetAll');

        if (!this._routes)
            return;

        for (let slug in this._routes)
        {
            let route = this._routes[slug];

            console.log('change to red');
            console.log(route);

            route.setOptions({
                polylineOptions: {
                    strokeColor: 'red'
                }
            });
        }
    }

    test (data)
    {
        console.log(data);
    }
}