Map address should be clickable to bring up map app on mobile

[anselmbradford]

Map info box address for a marker should be clickable on mobile to bring up map app.

[declan]

This SO post is a good intro of how to link to a map from mobile devices. Potential solutions are:

• The geo protocol. Not ideal because it doesn't work on iOS or most desktops.
• A link to maps.google.com. This is nice because it also works in the browser. However, iOS devices seem to intercept these links and stop the user from visiting them. iOS devices only work if you use...
• A link to maps.apple.com. Opens Apple Maps on iOS devices and OSX 1.9 and above. On Android devices and non-Apple desktops, this will redirect to maps.google.com.

Linking to maps.apple.com seems like the safest approach since it gets you to a map regardless of what device you're using. The only non-ideal case is when you are visiting from an Apple desktop, where I would prefer to have the map open as Google Maps in a browser tab, but the computer tries to open Apple Maps instead.

Thoughts on which approach to use? I supposed we could also do some browser sniffing if you think it's worth it, but it seems like keeping code to a minimum is a goal for you over the next few months.

[anselmbradford]

@declan Haven't had a chance to look into this yet, but hope to today. Thanks for the research!

[declan]

Do you think it makes sense to have the address in the Contact Info box be clickable as well?

[anselmbradford]

Thoughts on which approach to use? I supposed we could also do some browser sniffing if you think it's worth it, but it seems like keeping code to a minimum is a goal for you over the next few months.

Yeah, there are browser sniffing gems like https://github.com/fnando/browser that seem fairly minimal but I think at this stage that would be overkill for what this adds. An approach I'm thinking about is only responding with the map app route if the link is clicked using a touch event. This doesn't guarantee a mobile device, but will exclude a lot of desktop environments. Unfortunately, detecting input types consistently is the new version of the screen size variation and resolution boondoggle of mobile development.

It could look something like this: create a JS module that hooks into links that have a certain CSS class added (maybe link-map-app). For these links it adds an event listener for ontouchstart that prevents the default behavior of the link using event.preventDefault() when touched and instead opens maps.apple.com. My only worry with this would be a Windows Tablet touch device, because I'm not sure I can test that easily. Thoughts on this?

Do you think it makes sense to have the address in the Contact Info box be clickable as well?

Ties into #602 ... I don't think the zip and address both should be clickable and perform different functions. They could perform the same function (in-app location search vs open map app) depending on whether a click or touch event was used, but I'd lean toward confining the map-app function to the address shown on the map only, at least at this stage. The details map has its own infowindow that opens with the address as well, though that may easily go unnoticed.

[civicissuebot]

Hello! This issue looks like it still needs help!
It's been clicked on 50 times through the Civic Issue Finder on http://www.codeforamerica.org/.
Can this issue be closed or does it still need some assistance?

If you wrote this issue, you can always update the labels for specifying tasks, add more info in the description to make it easier to contribute, or re-write the title to make more contributors interested in helping out.
If you are an open source contributor, ask and see how you can help by commenting or check out more open issues in this repo at https://github.com/codeforamerica/ohana-web-search/issues.

Just doing a little 🌱 open source gardening 🌱 of Brigade projects!
For more info/tools for creating civic issues, check out Got Issues Thank you!

[declan]

At this point I won't be implementing this, so maybe we should close the issue.