I am new in ionic. Currently I am working on google map feature. I am able to draw route between source and destination and show multiple markers. It is working fine in browser but not in android emulator. My intention is to develop an app like "UBER". Please help me out. I am stuck here. Below my codes are given. Please help to review it and try to help to fix this problem.
getCurrentPosition() {
navigator.geolocation.getCurrentPosition((pos) => {
this.updateLocation.longitude = String(pos.coords.longitude);
this.updateLocation.phoneNumber = this.phoneNoValue.value;
this.updateLocation.userType = UserType.Customer;
this.updateLocationService
.updateLocation(this.updateLocation)
.subscribe(async (response) => {
if (response != null || response != undefined) {
this.driverList = response.driverList;
this.addMarkersToMap(this.driverList);
const toast = await this.toastController.create({
message: 'Location Updated',
duration: 2000,
position: 'bottom',
color: 'tertiary',
});
await toast.present();
}
});
});
}
addMarkersToMap(driverList) {
const centerPosition = { lat: 23.8042, lng: 90.3667 };
this.map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: centerPosition,
});
driverList.forEach(element => {
var myLatLng = new google.maps.LatLng(element.latitude, element.longitude);
const marker = new google.maps.Marker({
position: myLatLng,
map:this.map,
latitude:element.latitude,
longitude:element.longitude
});
marker.setMap(this.map);
this.cdr.detectChanges()
});
}
async calculateAndDisplayRoute() {
this.directionsService
.route(
{
origin: {
query: this.sourceLocation,
},
destination: {
query: this.destinationLocation.input,
},
travelMode: google.maps.TravelMode.DRIVING,
},
(response, status) => {
console.log('google', response)
this.googleMapResponse = response;
if (status == "OK") {
this.directionsRenderer.setMap(this.map);
this.directionsRenderer.setDirections(response);
this.driver.userLatitude = String(response.routes[0].legs[0].start_location.lat());
this.driver.userLongitude = String(response.routes[0].legs[0].start_location.lng());
this.driver.phoneNumber = this.phoneNoValue.value;
this.driver.destinationLatitude = String(response.routes[0].legs[0].end_location.lat());
this.driver.destinationLongitude = String(response.routes[0].legs[0].end_location.lng());
this.driver.pickupLocation = response.routes[0].legs[0].start_address;
this.rideRequestService
.getDriverList(this.driver)
.subscribe(async (res) => {
if (res != null || res != undefined) {
this.driverLocaiton.phoneNumber = res.phoneNumber;
this.driverLocaiton.driverList = res.driverList;
this.driverLocaiton.rideFareModelList = res.rideFareModelList;
const toast = await this.toastController.create({
message: 'Location Updated',
duration: 2000,
position: 'bottom',
color: 'tertiary',
});
await toast.present();
this.isExpand = false;
}
await Storage.set({key: 'google', value:`${JSON.stringify(response)}`});
});
} else {
window.alert("Direction req failed due to" + status);
}
})
this.isExpand = false;
}
Above has my code. Please help to fix the above code for showing multiple marker of google map in android emulator
