Why is this script not working?

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

Related Posts: