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.

score 3 · Answer 1 · edited May 23 '17 at 11:52

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.

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 '13 at 09:29

score 0 · Answer 2 · answered Jun 21 '13 at 08:49

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>

answered Jun 21 '13 at 08:49

Pirates

190
1
10

score 0 · Answer 3 · answered Aug 27 '13 at 18:54

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.

answered Aug 27 '13 at 18:54

ggutenberg

6,880
8
39
48

score 0 · Answer 4 · answered Aug 27 '13 at 22:05

0

Try InAppBrowswer provided by PhoneGap.

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

answered Aug 27 '13 at 22:05

Anup

627
5
19

score 0 · Accepted Answer · edited May 23 '17 at 11:59

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.

edited May 23 '17 at 11:59

Community

1
1

answered Oct 17 '13 at 06:30

alvarofd

51
1
6

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

5 Answers5