Convert <address> tag to Google Maps embed automatically with jQuery

Converting an <address> tag into a Google maps link is something I’ve written about in the past, but user “Moose” was wondering if you can do the same thing, but transform it into an embedded map. Quick answer: Yes!

Using jQuery, we search the document for <address> tags,  create some HTML to embed the map with the current address inserted in it, then write that HTML out into the current spot.

Welcome to JS Bin

Author: Michael Jasper

Michael is a Web Developer located in Northern Utah. When not programming, he enjoys spending time with his family, exploring the great-outdoors, and hit-and-miss cooking experiments.

  • Hi Mike!

    This is awesome! I had a support request to put this in the plugin, but I wanted to ask you before I go down that road so as to avoid another surprise.

    Would it be okay if I add this code to the plugin? No prob if you’d rather I stop using your code in public WordPress plugins. 🙂

    You are doing some awesome work – keep it up!



    • mdjasper

      Yes, and thank you for asking. Please just remember to site this post with proper attribution whenever posted/published.

  • Adam Sewell

    Maybe it’s just me, but this doesn’t seem to work with any other address. Is there a specific format the address needs to be in?

    • mdjasper

      Thank you for pointing out that bug! The *corrected* code now correctly embeds ANY address.

  • Daniel


    How do I structure the link if I want to use my own Google Map (with a unique id) and get the address to my markers.

    For example: I have an address that I want to use (inside the -tag), and same address is preset with a marker in my map.

    Hope you understand my problem.

    Thanks in advance

  • roy

    Hey thanx for ur post..
    I have trouble with my iframe that marker info window gets opened. and i dont want that to opened. from your code if the address is true, the marker info will be poped up. hope u got my problem.

    Thnx in advance.

  • Elodie

    Again, thanks, this is really great … It just works!

  • Ashsih

    Thank you for supporting me.

  • Erik Elmquist

    Hey Mike, This is amazing. Quick question. Is there a way to set up an array with Google maps operations. I want to disable scroll wheel zooming and add the zooming bar on the side. But I cant figure out how to add it into this code.
    Thanks again,
    this is awesome

  • Mikoy Hemp Mike

    sorry noob question new to jquery this code is for excel?? in vba or in html, css?? I just follow this link from an excel problem

  • osman musa

    This is so great man I am gonna use it on my site thank you very much for this.

  • Pingback: How to: How to convert an address into a Google Maps Link (NOT MAP) | SevenNet()

  • Pingback: How-to: How to convert an address into a Google Maps Link (NOT MAP) #computers #programming #answer | IT Info()

  • gianluca

    hi michael, i have some problem to center php urlencode($string). Image is more right respect to target. Thanks for sharing

  • Compliments on your work!
    But is there a way to let the tag not breakup lines in WordPress?
    When you now have an address in the middle of a sentence and use the tag,the link is forced to a new line, breaking up the paragraph.

  • John McGarrah

    Excellent job. Code looks good and works!

  • Ayush Datta

    Hi how can i mark multiple places in the same map?

  • Masivuye Bafana Webs

    u the best

  • Ws Memon

    i have two question about this google map iframe:
    -when i use several time in my website then draggable of map is not working except one.
    -how to change the style of map.

  • Your code is amazing thankyou!

  • Your code very helped me! Is simply, pratice, easy. So thank you very much!

  • Many Thanks for this. Saved my butt.