Convert < address > tags into Google Map link using jQuery

Share on Facebook1Share on Reddit0Tweet about this on TwitterShare on Google+2

Relevant Stack Overflow Question

While designing a page template for a University today, I realized that there were many areas of the future pages that would include street addresses: buildings, conferences, offices, ect..  I thought, “Wouldn’t it be nice if these addresses were links to Google Maps?” Then people could easily find directions or set their phone GPS whilst driving (at a red light of course).

However, I quickly realized that in such a large institution as I am, that no faculty member would take the time to include a maps link.  As always, such wondering is the stuff of inspiration.  With a little bit of thought, I began writing a little jQuery function that could fulfill my dream.


The function scans the entire webpage for instances of the <Address> tag:

And surrounds the address with a link to Google Maps:

Here is the jQuery Function:

Update: 11/27/2012 – Bug fix and code prettyfication.

Share on Facebook1Share on Reddit0Tweet about this on TwitterShare on Google+2
  • Thats inspiring and also good but i was wondering, i am in kenya, so would please tell me of the variables i need in order to use the code. Thanks

  • Having some trouble implementing this Mike…getting a “Unexpected token & error in the console. Any ideas?

  • Pingback: Turn Addresses in Your WordPress Blog into Google Maps Links -

  • Moose

    Do you know if there is a way to use the same input but generate the code for an embedded google maps iframe instead of just a link?

  • Sean Fitzpatrick

    Found an issue with the var link. Breaks the target=”_blank” code.
    Try adding an extra ‘ before the target=”_blank”

    • mdjasper

      Thanks Sean, I have fixed this bug and updated the code.

  • Mohamed

    thanks a lot

  • Shaun Brown

    Dude, this script saved my butt big time! Thank you!!

  • Hydro

    awesome job dude!!

  • John

    I got here from clicking a link that says “See a demo here”. But it seems I’m lost because I can’t find the demo, all I see is a tutorial.

  • chris foster

    h t t p :// 0.05%,debit,credit,keyed,swiped 0.05cent per transaction, $9.00 month, free terminal

    wix – h t t p ://2

  • Elodie

    That’s awesome! Thank you for taking the time to write this up! It’s great! (save me loads of time as well)

  • Thank you so much, this really made my website a lot more useful!