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

1. HTML Part

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

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.

$(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?&amp;q="+ encodeURIComponent( $(this).text() ) +"&amp;output=embed'>
          </iframe>";

    $(this).html(embed_iframe);
   });
});

That’s it!

Views (367)