How do you have to mark up a postal address so it allows invoking an intent on a mobile device?

StackOverflow https://stackoverflow.com/questions/17979386

  •  04-06-2022
  •  | 
  •  

Question

My goal would be that when a mobile user touches an address on a clients website that the appropriate intent would be invoked, allowing the user to, for example, display the location on Google Maps or start a GPS navigation.

Similar behavior is already working great for the phone number. Upon touching it, I'm asked if I want to complete the action using Skype or the Phone app.

So far, I've marked up the address with hcard microformat and LocalBusiness schema.org. I've also added geographic coordinates and marked them up as well. While that's all great for structured data, it didn't seem to have an effect regarding my initial goal.

Is what I'm trying to achieve even possible?

Was it helpful?

Solution

Before Apple Maps I used to put a link like the one below. When tapped, it would open the Google Maps App. I don´t have an iPhone to test it right now, but Chrome for Android shows the menu for you to chose which application will handle this type of link (Chrome, Maps, Waze, etc).

<a href="http://maps.google.com/maps?q=-22.90132,-43.176527">CCBB (Centro Cultural Banco do Brasil)</a>

OTHER TIPS

I use a geo: URI link, (combined with the arguments that Google Maps likes for after it's pulled up).

<a href="geo:37.44462,-122.16326?q=37.44462,-122.16326(CommerceNet)">CommerceNet</a>

Support isn't always there yet, but I think it's the closest to a standard that doesn't tie you to one specific app. Works on most mobiles, but didn't work on any desktop last I checked.

For a full solution, I actually combined that with both hCard and Schema.org data to produce a block:

<section itemscope itemtype="http://schema.org/GovernmentOrganization"
         class="vcard">
    <header>
        <h3 id="contactState"
            itemprop="name"
            class="org fn"
            style="margin-bottom:0;">SD State Capitol</h3>
    </header>
    <a href="geo:44.367064,-100.34588?q=44.367064,-100.34588(State+Capitol)"
       itemprop="address"
       itemscope itemtype="http://schema.org/PostalAddress"
       class="adr"
       style="font-size:medium !important;color:black !important;">
        <div itemprop="streetAddress"
             class="street-address">
            500 East Capitol Avenue
        </div>
        <div>
            <span itemprop="addressLocality"
                  class="locality">Pierre</span>,
            <span itemprop="addressRegion"
                  class="region">SD</span>
            <span itemprop="postalCode"
                  class="postal-code">57501</span>
        </div>
    </a>
</section>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top