Convert address tag to Google Maps embed tag(iframe) with jQuery - Web GNA

1. HTML Part

[html]
<address class="need_to_convert">
1 Chaplin Drive, Lane Cove West, New South Wales, Australia
</address>
[/html]

2. jQuery Part

Using jQuery, we will search the whole document for <address> tags with “need_to_convert” class name, create some HTML to embed the map with the current address inserted in it, then write that HTML out into the current location of the tags.

[js]
$(document).ready(function(){
$("address.need_to_convert").each(function(){
var embed_iframe =
"<iframe
width=’400′
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_iframe);
});
});
[/js]

That’s it!

Views (381)