search

ionic-team / ionic-native-google-maps

Google maps plugin for Ionic Native
Other
221 stars 125 forks source link

Markers not loading correctly, console errors ("unsupported URL") #312

Open ulver2812 opened 4 years ago

ulver2812 commented 4 years ago

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

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

cordova information: (run $> cordova plugin list) 

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-fcm-with-dependecy-updated 4.6.4 "Cordova FCM Push Plugin"
cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 3.2.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-network-information 2.0.2 "Network Information"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

@ionic-native/google-maps v4.21.0 @ionic-native/core v4.20.0

Current behavior: After map is loaded sometimes the markers are shown but as soon I move the map (zoom or drag) the markers disappears and I get these errors in console ("unsupported URL").

2020-05-19 10:22:59.139571+0200 AppAgenti[833:22663] Task <270E75CF-877A-4C2B-BBC0-5DCC8B8F7158>.<1> finished with error [-1002] Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL" UserInfo={NSUnderlyingError=0x600000bd16e0 {Error Domain=kCFErrorDomainCFNetwork Code=-1002 "(null)"}, NSErrorFailingURLStringKey=ionic://assets/imgs/markers/map/allevamento-bufale.png, NSErrorFailingURLKey=ionic://assets/imgs/markers/map/allevamento-bufale.png, NSLocalizedDescription=unsupported URL}
2020-05-19 10:22:59.141681+0200 AppAgenti[833:11881] [fail] url = ionic://assets/imgs/markers/map/allevamento-bufale.png
2020-05-19 10:22:59.143074+0200 AppAgenti[833:11881] (error) Can not load image from 'ionic://assets/imgs/markers/map/allevamento-bufale.png'.

Other times the markers are not loaded correctly from the beginning and I get the same errors in console.

Expected behavior: Markers correctly loaded

Tested on iOS 13.4.1. How can I fix this issue? Thanks

ulver2812 commented 4 years ago

I tried to use also this url for the markers: http://localhost:8080/assets/imgs/markers/map/allevamento-bufale.png

but i get these:

2020-05-19 10:22:59.141681+0200 AppAgenti[833:11881] [fail] url = http://localhost:8080/assets/imgs/markers/map/allevamento-bufale.png
2020-05-19 10:22:59.143074+0200 AppAgenti[833:11881] (error) Can not load image from 'http://localhost:8080/assets/imgs/markers/map/allevamento-bufale.png'.

this is my config.xml

<platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <allow-navigation href="http://localhost:8080/*" />
        <allow-navigation href="https://*google.com*" />
        <allow-navigation href="about:*" />
        <allow-navigation href="tel:*" />
        <allow-navigation href="mailto:*" />
</platform>
wf9a5m75 commented 4 years ago

Try ./assets/imgs/markers/map/allevamento-bufale.png

stefanobianchini commented 4 years ago

You have to prepend www in the image url only for iOS, and leave original url for Android. Something similar to: iconUrl: this.platformService.isIOS() ? "www/assets/markers/marker.png" : "assets/markers/marker.png",

wf9a5m75 commented 4 years ago

@stefanobianchini I fixed this problem in v2.7.0 (I guess)

mcastets commented 4 years ago

Yes, I can confirm that I had a similar issue but using ./assets/your_marker_location.png in v2.7.0 fixed it. No more platform specific hack.

ulver2812 commented 4 years ago

I'm using cordova-plugin-googlemaps 2.6.2 because I'm on ionic 3 and can't update to 2.7.0.

I have to prepend www/ in the image URL for iOS, for instance www/assets/imgs/markers/map/allevamento-bufale.png.

HenleyCoder commented 3 years ago

I am getting these errors reported in XCode when loading markers:

2020-07-10 19:28:46.821967+0100 RowTracker[8961:6704001] Task <3BAF0040-5A17-44DC-A2BD-327C0C96B1A0>.<1> finished with error [-1002] Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL" UserInfo={NSUnderlyingError=0x282845b60 {Error Domain=kCFErrorDomainCFNetwork Code=-1002 "(null)"}, NSErrorFailingURLStringKey=ionic://localhost/assets/images/finish-flag.png, NSErrorFailingURLKey=ionic://localhost/assets/images/finish-flag.png, NSLocalizedDescription=unsupported URL} 2020-07-10 19:28:46.822043+0100 RowTracker[8961:6703717] [fail] url = ionic://localhost/assets/images/finish-flag.png

The reason, I believe, is because there is a RETURN statement missing at line 1470 of PluginMarker.m. In the code snippet below I have added the RETURN statement after the call to completionBlock(YES, image);

if ([urlStr hasPrefix:@"file:"] || [urlStr hasPrefix:@"/"]) {
  NSString *iconPath = [urlStr stringByReplacingOccurrencesOfString:@"file:" withString:@""];
  NSFileManager *fileManager = [NSFileManager defaultManager];
  if (![fileManager fileExistsAtPath:iconPath]) {
    NSLog(@"(error)There is no file at '%@'.", iconPath);
    completionBlock(NO, nil);
    return;
  } else {
    UIImage *image = [UIImage imageNamed:iconPath];
    completionBlock(YES, image);
      return;  //*** ADD THIS LINE TO STOP RUNTIME ERRORS
  }
}

What I believe is happening without adding the RETURN statement is that the marker plugin has successfully found my marker image file and performed the callback to indicate success. However because the RETURN statement is missing it then goes on to search the web for the marker which will always fail so the error is reported.

Unrelated to the above issue, I believe there is also another issue at line 1449 of PluginMarker.m where a string replacement is performed on urlStr. The search string "^.assets" should be "^assets/". Because the trailing "/" is missing, the result of the string replacement is that the new string contains "assests//". The NSFileManager function fileExistsAsPath seems to cope with the extra "/" as it does find the icon file.

wf9a5m75 commented 3 years ago

If you find a problem, please send a pull request on the multiple_maps (not master) branch code of the cordova-plugin-googlemaps

HenleyCoder commented 3 years ago

I will do that when I can get app working on IOS. I am having the same issue as detailed in issues 2489 and 2547 with the errors as shown below. The errors give the impression that a map has been deleted but I do not believe this is the case. The error is occuring because I am invoking the following code to create a map instance:

map = GoogleMaps.create(element, options); return map.one(GoogleMapsEvent.MAP_READY);

it looks like the create() function has not finished initialising when the one() function is invoked and this causes the the one() function to fail to find the current map instance and hence generate the errors below because it thinks the map has been deleted when in fact it has not finished initailising.

I do appricate this is not the place to to report a new issue, i'll log a new issue if I can't work out what's going wrong. I only mention it here as there is a possibly I may be able to identify the problem and so will include it in the pull request for the change I have suggested above.

2020-07-10 19:28:16.683701+0100 RowTracker[8961:6703717] ERROR: Plugin 'map_0_76471423032' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml. 2020-07-10 19:28:16.684480+0100 RowTracker[8961:6703717] FAILED pluginJSON = ["INVALID","map_0_76471423032","detachFromWebView",[]] 2020-07-10 19:28:18.973998+0100 RowTracker[8961:6703717] ERROR: Plugin 'map_0_76471423032' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml. 2020-07-10 19:28:18.974336+0100 RowTracker[8961:6703717] FAILED pluginJSON = ["INVALID","map_0_76471423032","attachToWebView",[]]

wf9a5m75 commented 3 years ago

Could you share your project files on GitHub?

HenleyCoder commented 3 years ago

Thank you for your offer to help identify the problem but I've worked it out. I've changed the element parameter I pass to the create() function from an htmlElement to a string containing the id of the map canvas div.

There is an alternative solution which is to place the call to create() inside a timeout() event which presumably allows the page to fully load before the map is added to it.

Another minor querk is which page life cycle hook is used to invoke the map create() function. I was using the ionic ionViewDidEnter() hook which results in the "detachFromWebView" error as shown above. When I moved the call to create() into the Angular life cycle hook ngOnInit the error generated changed to "Error: Element must be under "