htmlioscordovagoogle-mapstaco

How to open <a href> link outside cordova webview (in Safari or Google Map)?


I have created a hosted app using this tutorial: Microsoft Tutorial Page

In this web app, there is <a href> link available which opens Google Map like:

<a href=""https://maps.google.com/?q=" + myAddressString target="_system"> Address URL </a>

While tapping on this href, it puts my app in background mode and opens map either in GoogleMap application or in Safari browser.

But sometimes, the same link opens the map URL in my hosted cordova app webview itself, due to that, my app went away and user does not get any way-around to return back to my application.

Can anyone please suggest how to embedd map url into hosted web app.

Note: I have already used InAppBrowser cordova plugin into my app.

Config file:

<access origin="*" /> <access origin="http://*/*" /> <access origin="https://*/*" /> <access origin="content:///*" /> <access origin="https://*google.com/*" /> <access origin="https://maps.google.com/*" /> <access origin="https://*.mywebsite.com/*" /> <access origin="https://*.myotherwebsite.com/*" /> <access origin="https://accounts.mywebsite.com/*" /> <access origin="https://accounts.myotherwebsite.com/*" /> <access origin="https://officerapp.mywebsite.com/*" /> <access origin="https://officerapp.myotherwebsite.com/*" /> <allow-intent href="*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="https://*google.com/*" /> <allow-intent href="https://maps.google.com/*" /> <allow-intent href="https://accounts.mywebsite.com/*" /> <allow-intent href="https://accounts.myotherwebsite.com/*" /> <allow-intent href="https://officerapp.mywebsite.com/*" /> <allow-intent href="https://officerapp.myotherwebsite.com/*" /> <allow-navigation href="https://accounts.mywebsite.com/*" /> <allow-navigation href="https://accounts.myotherwebsite.com/*" /> <allow-navigation href="https://myapp.mywebsite.com/*" /> <allow-navigation href="https://myapp.myotherwebsite.com/*" />


Solution

  • This is pretty simple to do, try to open it as if you open the link in a new tab. Just add this attribute to your code:

    target="_blank"
    

    So, you have:

    <a href=""https://maps.google.com/?q=" + myAddressString target="_blank"> Address URL </a>