Native Google Maps and Google Directions

HI, I’m creating an app the uses native google maps(I’m not using the Google Map JavaScript API cause of performance). I was able to add custom markers and everything. What I needed is to connect the 2 markers that I created. I have read the Google Directions via javascript is not working along with native google maps. Is this true? If so, How can I draw a line between the 2 markers that I created. Thanks!

Hi, I use the Javascript API for directions services and I already got the response, but it just won’t draw on my map.

Here is my code :


this.gmap = GoogleMaps.create("map",mapOptions);
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(this.gmap);
this.displayDirection(directionsService,directionsDisplay);
displayDirection(directionsService, directionsDisplay) {
           directionsService.route({
	          origin: this.mark_a_latlng,
	          destination: this.mark_b_latlng,
	          travelMode: 'DRIVING'
	        }, (response, status) => {
	          if (status === 'OK') {
	            directionsDisplay.setDirections(response);
	          }
	        });
}

Thanks

@ionic-native/google-maps does not use the Google Maps JavaScript API v3 at all. Thus, you need to parse the response, and add polyline by yourself.

Thanks! I guess I’ll just use polylines to connect my markers.

can you share your code sir! i’m able to get polyline works, but it doesn’t show in direction

declare var google;

@IonicPage()
@Component({
selector: ‘page-airporttrip’,
templateUrl: ‘airporttrip.html’,
})
export class AirporttripPage {

@ViewChild(‘map’) mapElement: ElementRef;
map: any;
start: any; end: any;
directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer;

constructor(public navCtrl: NavController, public navParams: NavParams, ) {
this.start = ‘Kamban Nagar, Reddiarpalayam, Puducherry’;
this.end = ‘Adambakkam, Chennai, Tamil Nadu’;
// this.start = this.navParams.get(‘start’);
// this.end = this.navParams.get(‘end’);
}

ionViewDidLoad() {
this.initMap(); console.log(this.start, “141”);
}

initMap() {
this.map = new google.maps.Map(this.mapElement.nativeElement, {
zoom: 20,
center: { lat: 11.9366395, lng: 79.8085858 },
});
this.directionsDisplay.setMap(this.map);
this.directionsService.route({
origin: this.start,
destination: this.end,
travelMode: ‘DRIVING’
}, (response, status) => {
if (status === ‘OK’) {
this.directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ’ + status);
}
});
}

}

html

<div #map id=“map9”></div>

hope this works for u too

sir i have used above same code but i got status will be “Not found” every time do you know why got “Not found” status every time and i am using ioni3.9.2 version?

I tried what you say about getting the route using the Directions API of Google Maps, but the response of this API has an array called routes, where all the points that form the route are but they have a very interesting property called overview_polyline.points = "meupBxoyfRCfA\\@n@Cl@CtAEZAf@JTHr@BEBvBHdDLhEJdD?A|DGbFEnC?n@DZR@j@r@NV@XA\\wCEyCD"
https://developers.google.com/maps/documentation/directions/intro?hl=en#DirectionsResponses
My question is:
Can I pass the points property of overview_polyline to the addPolyline method of
@ionic-native/google-maps to draw the route automatically?

            directionsDisplay.setDirections(res);
             directionsDisplay.setMap(this.map);

put this line after setDirections …its works

1 Like