5

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.

5 Answers 5

3

Both 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.com/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 comment. 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.com/etc.etc.

to (actually all on one line, formatted here for readability):

javascript:window.open(
    'http://google.com/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.

1
  • Thanks for the answer. I noticed it, but the matter is that as the webpage is packaged as an native app using Phonegap, all the pages open in the same window to simulate a real native app. So I want to open it in a pop-up or the like.
    – alvarofd
    Jun 21, 2013 at 9:29
0

Try this in your window.location that you open in new tab :

i.e: <a href="#" onclick="window.open('stackoverflow.com')">New Map(In new window)</a>
0

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.

0

Try InAppBrowswer provided by PhoneGap.

http://docs.phonegap.com/en/edge/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

0

SOLVED! I've found a solution on this answer: https://stackoverflow.com/a/16575541/2507996 . It changes link behaviour capturing the click event and opening new windows with PhoneGap/Cordova InAppBrowser. Thanks all for your answers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.