Capacitor Google Maps Custom Icon WILL NOT work unless its https://

Issue

I am using Capacitor with the Google Maps package and cant get a custom icon for my marker (on android) for the life of me. It works fine on the web, first off. Thats a breeze. The problem is when i set the "iconUrl" for the marker and then deploy to android.

Android works with a remote url (https://) but NOTHING else will work. I have tried local paths from the filesystem with the result from writeFile() response:

let data = await Filesystem.writeFile({
                        path: `${marker.icon}.png`, // 'test.png',
                        data: marker.pngUrl.split(',')[1], // base64 encoded from canvas.toDataURL('image/png')
                        directory: Directory.Documents,
                        recursive: true, // ideally it would be in a folder path
                        // encoding: Encoding.UTF8, // leave empty for base64
                    });
marker.iconUrl = data.uri;

Any variation i can think of for this i have tried. I dont understand what im doing wrong or if the newest version of google maps cant do this now? Im not terribly impressed with some of the code in here (such as the camera animate feature which it shows everywhere is available but isnt actually in the code except for taking in that information. It then does nothing with it). I'm also NOT an android developer so checking the code to see whats wrong doesn't help.

ANY help at all would be appreciated. My end goal originally was to keep svg's in the app as text to use as little space as possible. Apparently google maps will take svgs but just not from capacitor though. So ive been trying to convert my svgs to pngs and then use those with things like the canvas api. So if anyone has an answer for svgs that would be best but ill take anything!

relevant versions from package.json:

"@capacitor/assets": "^2.0.4",
"@ionic/lab": "^3.2.15",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.20.4",

"@capacitor/android": "^5.1.1",
"@capacitor/app": "^5.0.6",
"@capacitor/cli": "^5.2.2",
"@capacitor/core": "^5.1.1",
"@capacitor/filesystem": "^5.1.4",
"@capacitor/geolocation": "^5.0.5",
"@capacitor/google-maps": "^5.3.3",
"@capacitor/ios": "^5.1.1",
"@ionic/cli": "^7.1",
"@ionic/core": "^7.5",
"@trapezedev/configure": "^7.0.10",
"dotenv": "^16.3.1",
"ionic-svelte": "^0.5.81",
"native-run": "^1.7.2"

Note: i also see a different version of google maps out there from "@capacitor-community/google-maps" and maybe i should be using that? Looks like the same thing really except for how it integrates. Again ANY advice would help. Just need icons with custom images!!!!

Solution

So the answer here is that because of the way an app like android is packaged and how webview is able to "serve" urls, there isnt a way to create an image on the fly and then use that inside capacitors google maps (at least not yet). The only thing that was possible here was to generate the png's before a build and incorporate them into the package. Doing this would give the images a location inside android/app/src/main/assets/public and then they can be referenced as a marker icon by simply setting the iconUrl parameter to "image.png".

IMO this really sucks because the package is going to be bloated with images that can be generated instead of packaged. Native google maps doesnt hinder you from using all kinds of images but capacitor just isn't there yet.

One thing that was very misleading is the code says you can reference the images like this:

iconUrl: 'assets/icon/pin.png',

but then it's confusing because if you use the Filesystem API and look inside like the Documents.Data foler, you will find an assets directory. That is not it!

I can say that the ability to use a data url with base64 (which native Google maps can do) would have made this 1000x easier. Hopefully they add it in the future and I can remove some bloat from my app.

Its been a nice learning experience and i wont complain any more as the ionic capacitor project is saving my butt right now so much appreciated guys!

EDIT: you can use png data urls if you use @capacitor-community/google-maps instead. They also have a different set of features that one could say is more robust

Answered By - Nimrod5000