How to open Google Maps links in a pop up window?

Question

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.

Answer 1

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.