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

Posted on October 4, 2012 by Michael Jasper — 6 Comments ↓

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.

$(document).ready(function(){

$("address").each(function(){

var embed ="<iframe width='425' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&q="+ encodeURIComponent( $(this).text() ) +"&output=embed'></iframe>";

$(this).html(embed);

});

Welcome to JS Bin

Posted in Uncategorized

http://twitter.com/themightymo Toby Cryns

Hi Mike!

This is awesome! I had a support request to put this in the http://wordpress.org/extend/plugins/convert-address-to-google-maps-link/ 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!

Thanks!

Toby
- 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

Hi,

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.