'Avoid prefixing img src for data:image url @ionic-native/google-maps

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:

  • @ionic-native/google-maps: 5.5.0
  • cordova-plugin-googlemaps: 2.7.1
  • Ionic CLI version: 6.16.3
  • Ionic Framework: @ionic/angular 5.2.3
  • Cordova Platforms: android 9.1.0, ios 6.2.0
  • angular: 9.1.6


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source