Ionic-native-google-maps: Support for Directions services

[bcba25]

I'm submitting a ... (check one with "x")

• [ ] question
• [ ] any problem or bug report
• [V ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [V ] Android
• [V ] iOS
• [ ] Browser

Could you please add a Directions Services support for native google maps. Currently I'm using a Javascript version of the map inside my app just because of lack of this feature. Thanks

[wf9a5m75]

If you donate $1,000 usd to the project, i will create it soon.

[bcba25]

@wf9a5m75 oh which means you are the only developer for the module ? Means Ionic doesn't provide it at all ?

[wf9a5m75]

This plugin @ionic-native/google-maps is just a wrapper of cordova-plugin-googlemaps.
Until cordova-plugin-googlemaps implement a new feature, this plugin does not have it.

I'm the author of cordova-plugin-googlemaps, and I have no plan to implement direction API so far, because nobody pay for my work.

"Time is money". It's a world common idiom.
Nobody pay for my work, I wont work except until change my mind.

[cosnofski]

@hxdef2517

If you're looking for a simple workaround, just make an http request to the google maps directions api... no google maps js library needed

something like this should/might work. Might need tweaking..

let url: string = https://maps.googleapis.com/maps/api/directions/json?key=YOUR_API_KEY&origin=New York, NY&destination=Chicago, IL

// url could be for lat, lng
// https://maps.googleapis.com/maps/api/directions/json?key=YOUR_API_KEY&origin=LAT,LNG&destination=LAT,LNG

http.get(url).subscribe( (response) => {

// do something with response

})

let decodedPoints = GoogleMaps.getPlugin().geometry.encoding.decodePath(
// not sure if this is the exact path to the overview_polyline attribute...
response.routes[0].overview_polyline.points;
);

this.map.addPolyline({
points : decodedPoints,
color : '#AA00FF',
width: 2,
geodesic : false
})

Hope this helps...

[sameer-sm01]

use this way its work
let directionsService = new google.maps.DirectionsService;
directionsService.route({
origin: { lat: this.lat, lng: this.lng },
destination: { lat: this.D_lat, lng: this.D_lng },
travelMode: google.maps.TravelMode['DRIVING']
}, (res, status) => {
if (status == google.maps.DirectionsStatus.OK) {
let decodedPoints = GoogleMaps.getPlugin().geometry.encoding.decodePath(
res.routes[0].overview_polyline
);
this.map.addPolyline({
points: decodedPoints,
'color': '#4a4a4a',
width: 4,
geodesic: false
});

        } else {
            console.warn(status);
        }

    });

[andreasdaoutis-cpi]

@cosnofski this code still works well!

[ulver2812]

@hxdef2517

If you're looking for a simple workaround, just make an http request to the google maps directions api... no google maps js library needed

something like this should/might work. Might need tweaking..

let url: string = https://maps.googleapis.com/maps/api/directions/json?key=YOUR_API_KEY&origin=New York, NY&destination=Chicago, IL

// url could be for lat, lng
// https://maps.googleapis.com/maps/api/directions/json?key=YOUR_API_KEY&origin=LAT,LNG&destination=LAT,LNG

http.get(url).subscribe( (response) => {

// do something with response

})

let decodedPoints = GoogleMaps.getPlugin().geometry.encoding.decodePath(
// not sure if this is the exact path to the overview_polyline attribute...
response.routes[0].overview_polyline.points;
);

this.map.addPolyline({
points : decodedPoints,
color : '#AA00FF',
width: 2,
geodesic : false
})

Hope this helps...

In this way I have CORS issue and it doesn't work (I tested it in browser). The @sameer-sm01 solution works well.