Marker Image Not Appearing

[hrhosni]

I'm submitting a ... (check one with "x")

• [ ] question
• [x] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [ ] Android
• [x] iOS

cordova information: (run $> cordova plugin list)

code-push 3.0.1 "CodePushAcquisition"
com.amitsinha.backashome 0.1.0 "Back As Home"
com.googlemaps.ios 3.9.0 "Google Maps SDK for iOS"
cordova-plugin-advanced-http 3.2.2 "Advanced HTTP plugin"
cordova-plugin-badge 0.8.7 "Badge"
cordova-plugin-buildinfo 2.0.2 "BuildInfo"
cordova-plugin-code-push 1.13.1 "CodePush"
cordova-plugin-datepicker 0.9.2 "DatePicker"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-dialogs 2.0.1 "Notification"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-google-analytics 1.8.6 "Google Universal Analytics Plugin"
cordova-plugin-googlemaps 2.7.1 "cordova-plugin-googlemaps"
cordova-plugin-local-notification 0.9.0-beta.2 "LocalNotification"
cordova-plugin-locationservices 2.1.0 "Google Location Services for Cordova - Android"
cordova-plugin-media 5.0.2 "Media"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-request-location-accuracy 2.2.3 "Request Location Accuracy"
cordova-plugin-spinner-dialog 1.3.1 "SpinnerDialog"
cordova-plugin-splashscreen 6.0.0 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-vibration 3.0.1 "Vibration"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-wkwebview-file-xhr 3.0.0 "Cordova WKWebView File XHR Plugin"
cordova-plugin-zip 3.1.0 "cordova-plugin-zip"
onesignal-cordova-plugin 2.4.7 "OneSignal Push Notifications"

Current behavior: The marker is showing as the default (red) Google Maps marker instead of the png image I am providing (see screenshot below). It broke after updating to cordova-ios@6.2.0.

Expected behavior: It should show the png image I provided as the marker.

Screen capture or video record:

Related code, data or error log (please format your code or data):

I see the following error in the console: map_0_16186021532 – "Can not load image from 'app://localhost/img/my_location.png'." in cordova.js:1413

Here's the piece of code that puts the marker on the map:

map.addMarker({
      position: latlng,
      icon: {
        url: "img/my_location.png",
        size: {
          width: MARKER.MY_LOCATION.WIDTH,
          height: MARKER.MY_LOCATION.HEIGHT,
        },
        anchor: [MARKER.MY_LOCATION.WIDTH / 2, MARKER.MY_LOCATION.HEIGHT],
      });

Thank you.

[pdanysz]

I was also facing similar issue. My problem was with the correct path to the image.

This is my solution: const icon = './www/assets/icons/vehicles/vehicle-010.png';

And this works for IOS: "cordova-ios": "^6.2.0",

[hrhosni]

The above by @pdanysz does not work unfortunately.

@wf9a5m75 would appreciate your take on this

[CodeWithOz]

@pdanysz @hrhosni have you tried this

...
url: `${cordova.file.applicationDirectory}www/img/my_location.png`,
...

That works for me.

[hrhosni]

@CodeWithOz

Thanks for the above. It works on Android but not on iOS.

I get the following on iOS:

(error)There is no file at '/var/containers/Bundle/Application/9272787B-8D47-4981-9E03-C3A7EF202F75/appName.app/www/img/my_location.png'

[Danbardo]

Hey, I had the same issue. This is not a solution, but a workaround. I hosted the images online and replaced the URL with a direct link to the image.