Native Google Maps and Google Directions


#1

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!


#2

#3

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


#4

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


#5

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


#6

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


#7

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