Why is this script not working?

Question

I've got the script from here http://www.mikedoesweb.com/2012/convert-tag-to-google-maps-embed-automatically-with-jquery/

I need to replace an address with a google map inside the post content. None of the Google map plugins I've found work the way I need them too.

$(document).ready(function(){
  $("address").each(function(){                         
    var embed ="<iframe width='100%' 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);

   });
});

The address on the page in embeded like :

<address>30 Rockafeller plaza, New York NY</address>

I've placed the following in my functions.php

function googleaddress_function() {
wp_enqueue_script( 'googleaddress', get_template_directory_uri() . '-child-theme/google-maps-address.js', array(), null, true);
}
add_action('wp_enqueue_scripts','googleaddress_function');

I've tried it in the footer and in the header.

I've even tried embedding it directly on the page as well just for good measure, I've deactivated all other plugins to check for conflicts. Nothing seems to work?

Any ideas?

alternatively If you know of a plugin can be embedded on a page and is able change the address/meta data inside the shortcode on the page without having to manually create separate maps then I'll try that instead.

i.e. [googlemapshortcode="101 this is my address, TN56 7YT" width="100%" height="350px"]

Answer 1

I think the issue that the Google maps API isn't loading correctly. You need to make sure that the both jQuery and Google maps API are being loaded.

https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js http://maps.google.com/maps/api/js

It can be any recent version of jQuery, and from any source.

Assuming that your jQuery function is contained within your google-maps-address.js file the following will load the file once jQuery has finished loading.

function googleaddress_function() {
    wp_enqueue_script( 'google-maps-api', 'http://maps.google.com/maps/api/js' ); //Add this line
    wp_enqueue_script( 'googleaddress', get_template_directory_uri() . '-child-theme/google-maps-address.js', array( 'jquery' ), null, true); //Add jquery dependency
}
add_action('wp_enqueue_scripts','googleaddress_function');

You can then set your jQuery function to no conflict mode (see below)

jQuery(document).ready(function($) {
    $("address").each(function(){                         
        var embed ="<iframe width='100%' 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);
    });
});

In short it's a case of swapping the first $ with jQuery and then adding $ to the parentheses following function.

That should hopefully fix the problem for you, I've attached an example below too.

http://codepen.io/raptorkraine/pen/JGKBvx