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;
displayDirection(directionsService, directionsDisplay) {
	          origin: this.mark_a_latlng,
	          destination: this.mark_b_latlng,
	          travelMode: 'DRIVING'
	        }, (response, status) => {
	          if (status === 'OK') {



@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;

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() { = new google.maps.Map(this.mapElement.nativeElement, {
zoom: 20,
center: { lat: 11.9366395, lng: 79.8085858 },
origin: this.start,
destination: this.end,
travelMode: ‘DRIVING’
}, (response, status) => {
if (status === ‘OK’) {
} else {
window.alert('Directions request failed due to ’ + status);



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

hope this works for u too