Nativescript with Googlemap static api - issue on iOS - ios

Question

I am trying to add an image of a map generated by the google map static api in my Nativescript application (I'm using Nativescript with Vue).
I am able to make it work on Android but I have some issues on iOS.
I simply have an Image component like that <Image :src="map_source" />
And in my vue data, I have map_source: "https://maps.googleapis.com/maps/api/staticmap?&markers=48.2,2.1&path=color:red|weight:5|fillcolor:red|48.2,2.1|48.3,2.13|48.4,2.12&zoom=10&size=460x200&key=MY_API_KEY"
When I use this URL in my browser, I get the desired map.
When I use this URL in my app on Android, it displays the map correctly.
But when I use the same URL in my app on an iOS device, the map is not displayed at all.
Note: if I remove the path (e.g map_source: "https://maps.googleapis.com/maps/api/staticmap?&markers=48.2,2.1&zoom=10&size=460x200&key=MY_API_KEY", the image is correctly displayed on both Android and iOS. The error only appens when I add the path.
Is this an iOS issue or am I doing something wrong ?

Answer 1

I was able to find the issue thanks to #Manoj. On iOS devices, the URL was unsupported because of the "|" character. So I had to encode it like so:
let imageSourceModule = require("tns-core-modules/image-source");
let url = encodeURI("https://maps.googleapis.com/maps/api/staticmap?&markers=48.2,2.1&zoom=10&size=460x200&key=MY_API_KEY")
imageSourceModule.fromUrl(url).then(res => {
this.map_source = res;
});