I'm developing a mobile web app with jQuery+Phonegap which uses the Google Maps API v3 and I'm having some issues with the links attached to the map.
My question is if it's possible to open the Terms and Conditions and the Google Maps links on a pop-up window instead of opening them on the same window to avoid stucking on devices which have no physical buttons like the Apple ones. I've tried to attach an 'click' event to the child elements of the map canvas and to change the target of them but I haven't been able to achive that. Is there a solution?
Thanks.
I'm developing a mobile web app with jQuery+Phonegap which uses the Google Maps API v3 and I'm having some issues with the links attached to the map.
My question is if it's possible to open the Terms and Conditions and the Google Maps links on a pop-up window instead of opening them on the same window to avoid stucking on devices which have no physical buttons like the Apple ones. I've tried to attach an 'click' event to the child elements of the map canvas and to change the target of them but I haven't been able to achive that. Is there a solution?
Thanks.
Share Improve this question edited Jun 21, 2013 at 9:29 alvarofd asked Jun 21, 2013 at 7:21 alvarofdalvarofd 511 silver badge6 bronze badges5 Answers
Reset to default 3Both of those links have target="_blank" on them, so normally they should open in a new window automatically. For example the Google Maps link looks like this:
<a target="_blank"
href="http://maps.google./maps?..."
title="Click to see this area on Google Maps"
style="position: static; overflow: visible; float: none; display: inline;"
>
<div ...>
<img ...>
</div>
</a>
But it looks like PhoneGap is overriding that behavior as you mentioned in the ment. In fact if you search for:
phonegap target _blank
you will find quite a bit on the topic, in particular this discussion and this issue.
It looks like they want people to use PhoneGap's InAppBrowser, but it appears to be tied specifically into the window.open() function. So you could try changing the href in these <a> elements to use a window.open() call instead of a simple URL.
For example, if you've gotten a reference to one of those <a> elements in a variable called link, you might try:
link.href =
"javascript:window.open( '" +
link.href +
"', '_blank', 'location=yes' );";
That changes the href from:
http://google./etc.etc.
to (actually all on one line, formatted here for readability):
javascript:window.open(
'http://google./etc.etc.',
'_blank',
'location=yes'
);
Another possibility might be the technique in this answer using rel="external" on the <a> tag and a change in the MainViewController. But that is deprecated and requires a similar amount of fiddling with the DOM elements.
One other thought... Normally, fiddling around with the inner workings of these maps and ToS links might be considered a violation of the terms of service. However, I think you could easily argue here that you are merely preserving the original intent of these links in the face of a PhoneGap issue that prevents them from working properly.
Try this in your window.location that you open in new tab :
i.e: <a href="#" onclick="window.open('stackoverflow.')">New Map(In new window)</a>
Try using the ChildBrowser plugin. You still might need to do some JavaScript trickery in order to capture the tap and open it in the ChildBrowser.
Try InAppBrowswer provided by PhoneGap.
http://docs.phonegap./en/edge/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser
SOLVED! I've found a solution on this answer: https://stackoverflow./a/16575541/2507996 . It changes link behaviour capturing the click event and opening new windows with PhoneGap/Cordova InAppBrowser. Thanks all for your answers.