I have an Ionic Cordova application running on both iOS and Android with Angular. I use the @ionic-native/google-maps plugin to display a map along with different kind of markers. Until now, I have only used static markers from .png files which works perfectly and expected.
However, I have come to a point where I want the users to see other markers that are dependent on a state in the code. To solve this, I have created a SVG template as a string where I replaces some value to reflect the parameters I want to be displayed. I then perform some regex on the string to to encode it correctly (similar to XMLSerializer.serializeToString()) before base64 encode it and prefixing with data:image/svg+xml;base64,. This way, I have an data URL to be used with the src tag in the marker img attribute through the Marker's MarkerOption icon url property which result in:
const icon = { url: 'data:image/svg+xml;base64,PD9 (...)', size: { width: 38, height: 40 }, anchor: [0, 40] }
const marker: Marker = this.map.addMarkerSync({
icon,
(...)
})
According to the cordova-plugin-googlemaps documentation (see here), this is a valid way to specify an icon for a marker. However, Ionic tries by default to fetch this url from http://localhost:8100 which naturally will fail. I end up with the following error message in console:
map_0_24694408793: "Can not load image from 'http://localhost:8100/data:image/png;base64,Pd9 (...)'
I have tried different approaches as well without any results. Such as file://, /, // and window.Ionic.WebView.convertFileSrc() (as for normal files). I have also tried to input the url directly to the icon parameter: icon: icon.url
Is there by any chance possible to tell Ionic not to look for that source when it contains an data:image URI that I have overlooked?
Versions: