"Get Directions" code for mobile?

by AllenK
17 replies
Can someone advice on the code to add "Get Directions" function
to the Location page on a mobi site?

Currently I have just Google Map plugin there showing the map.

I'd like to add "Get Direction" entry field (with the words "Enter starting location") and a button.

So that the users type in starting location, press a button and get Google from-to directions
(Google) all filled in for them.

Thanks a bunch!



.
#code #get directions #mobile
  • Profile picture of the author Adrian John
    What i am doing is have people Click(Tap) on the Image of the Map and the link should go straight to Google directions page.
    You can get the link straight to direction by going to exact Google places listing of your client, click Directions and up on the right you will find the link.
    Here's a short video i just made to explain how i do it.Watch it Full Screen for better view.
    Code:
    http://screencast.com/t/RIhA3EmnKfi
    Also, just bellow the link for directions(the end of the video) it's the embed code which can be customized easily to fit your needs.

    Hope it helps.

    Adrian
    Signature
    ARE YOU A CONSULTANT? Do you have clients who could use MORE LEADS?
    Get them a MOBILE WEBSITE PLATFORM built to stay up with their clients habits.
    More than 50% of their customers buys from their mobile devices now!

    CLICK HERE FOR MORE INFO
    {{ DiscussionBoard.errors[5041373].message }}
    • Profile picture of the author AllenK
      Thanks for the video Adrian.

      I tried your setup. For me it returns a map.
      I want a direction finder dialog box.

      But you gave me an idea for a hack though:

      1. Make a "Get Directions" button
      2. Go to http:// maps.google.com/m/directions
      3. Enter the destination address and hit 'Search'. Google returns a URL
      4. Hook up that URL to the button.

      This way user gets a direction finder dialog with a filled in destination.
      Ugly but it works.

      That page is a bit screwy. though. It's ironic, how with all it's "mobile push",
      Google's own mobile page formats poorly on a mobile.



      .
      Signature
      WP Mobile Pro review -- Build well-designed Mobile sites in minutes, simply in Wordpress.
      (A pro-tool for professional Offline-consultants.)
      {{ DiscussionBoard.errors[5041637].message }}
    • Profile picture of the author DABK
      Nice video.

      Can the page with the directions open in the same window?

      Originally Posted by Adrian John View Post

      What i am doing is have people Click(Tap) on the Image of the Map and the link should go straight to Google directions page.
      You can get the link straight to direction by going to exact Google places listing of your client, click Directions and up on the right you will find the link.
      Here's a short video i just made to explain how i do it.Watch it Full Screen for better view.
      Code:
      http://screencast.com/t/RIhA3EmnKfi
      Also, just bellow the link for directions(the end of the video) it's the embed code which can be customized easily to fit your needs.

      Hope it helps.

      Adrian
      {{ DiscussionBoard.errors[8488316].message }}
  • Profile picture of the author WillR
    This is the code you will need to make it work. This form will allow people to enter their location and get directions to 123 Story St Brooklyn, NY 11218. Obviously you would just change that address to whatever destination address you need.

    <form method="get" action="http://maps.google.com/m/directions">
    <fieldset>
    <input type="hidden" name="daddr" value="123 Story St Brooklyn, NY 11218" />
    <label>Enter Starting Location:</label>
    <input name="saddr" type="text" class="input" />
    <input type="submit" name="submit" class="button" value="Get Directions" />
    </fieldset>
    </form>
    {{ DiscussionBoard.errors[5041707].message }}
    • Profile picture of the author mrtrance
      Originally Posted by WillR View Post

      This is the code you will need to make it work. This form will allow people to enter their location and get directions to 123 Story St Brooklyn, NY 11218. Obviously you would just change that address to whatever destination address you need.

      <form method="get" action="http://maps.google.com/m/directions">
      <fieldset>
      <input type="hidden" name="daddr" value="123 Story St Brooklyn, NY 11218" />
      <label>Enter Starting Location:</label>
      <input name="saddr" type="text" class="input" />
      <input type="submit" name="submit" class="button" value="Get Directions" />
      </fieldset>
      </form>
      This code no longer seems to work. It's giving me an error when I implement on the site and hit "get directions" button. Did Google change the url recently of the "http://maps.google.com/m/directions"? Any input on this?
      Signature

      {{ DiscussionBoard.errors[6389582].message }}
  • Profile picture of the author AllenK
    Will saves the day (again)! That's a killer trick.

    Btw, is it possible to put (pre-polulate) "Enter Starting Location" into the search box itself?

    Thank you.
    Signature
    WP Mobile Pro review -- Build well-designed Mobile sites in minutes, simply in Wordpress.
    (A pro-tool for professional Offline-consultants.)
    {{ DiscussionBoard.errors[5041788].message }}
    • Profile picture of the author WillR
      Originally Posted by AllenK View Post

      Will saves the day (again)! That's a killer trick.

      Btw, is it possible to put (pre-polulate) "Enter Starting Location" into the search box itself?

      Thank you.
      You can do that but I am pretty sure it would use javascript. For those who don't have javascript it then means they have to delete that text before they can enter their address. I've also been to forms that had pre-populated fields on a javascript enabled phone and had the same issue where I had to delete what was in the box before I could type my text in it.

      I think the better user experience for mobile phones is probably to have the field label above or next to the text box like in the example above... and leave the text box completely empty.

      That's just my personal preference though.
      {{ DiscussionBoard.errors[5042203].message }}
      • Profile picture of the author AllenK
        Yeap. Makes sense. The simpler, the better.
        Signature
        WP Mobile Pro review -- Build well-designed Mobile sites in minutes, simply in Wordpress.
        (A pro-tool for professional Offline-consultants.)
        {{ DiscussionBoard.errors[5042375].message }}
  • Profile picture of the author lint631
    Did you try it on a smartphone? It doesn't work on my computer but works on my iPhone.
    {{ DiscussionBoard.errors[6423984].message }}
    • Profile picture of the author mrtrance
      Originally Posted by lint631 View Post

      Did you try it on a smartphone? It doesn't work on my computer but works on my iPhone.
      Doesn't work on my Android phone. Gives me a Google error message.
      Signature

      {{ DiscussionBoard.errors[6427057].message }}
  • Profile picture of the author WillR
    Yes, Google have mucked around with things since this code was written. It isn't working anymore.
    {{ DiscussionBoard.errors[6463185].message }}
  • Profile picture of the author DexterGallagher
    Using JM, you have no issues it works every time - why the confusion? Are people coding their own sites?
    Signature

    We offer mobile optimized websites at http://mobilewebsitecreationltd.co.uk/

    {{ DiscussionBoard.errors[8488324].message }}
  • Profile picture of the author SocialLooks
    We are InstantMobi.com. We offer VERY easily sold services which offer two essential elements:

    1) High value commissions to you and
    2) High quality product for the purchaser.

    Our commissions stay with you for the life of the customer - we don't have cancellations!
    {{ DiscussionBoard.errors[8520347].message }}

Trending Topics