How To Integrate Polylines into the IONIC Appery Version of the Google Map object

[Andy Parker]

I use the Appery Google Map object with markers and this works well.
I need to incorporate Polylines onto the map.

I've found code to implement this in non-Appery mapping, but can you tell me how we incorporate the Poly lines into the Appery Map object in IONIC projects?

The code to do this outside of Appery Google Map object is:
code
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: 'terrain'
});

var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);
}
/code

thanks

Andy

[Serhii Kulibaba]

Hello Andy,

Unfortunately this is outside the scope of our support. Please search online for appropriate solution.

It seems you use incorrect value of the ID property of the map component. E.g. please use predocument.getElementsByClassName("aio-google-map")[0]/pre instead of predocument.getElementById('map')/pre

[Andy Parker]

thanks for this tip, it actually enabled me to get the polyline onto the map.

It did however wipeout the existing map, but I'm sure I can work around that.

Thanks again.

One last question;

How would I have found that the class name of the google map was what you posted above? Is that not an Appery assigned class name?

[Serhii Kulibaba]

You can find it by inspecting DOM elements of the application page.
https://developers.google.com/web/too...

[Andy Parker]

Perfect, many thanks