Passing wordpress template_directory_uri() to acf-maps.js

Question

I can't seem to figure this out.

I'm using Wordpress with advanced custom fields and custom post types in order to display a map with the location associated with those custom post types.

I'm using MarkerClusterer and wanted to customize the icons for it, and don't want to hardcode the path to the image.

I understand I should use wp_localize but don't know how to do it.

I have a functions.php file in my theme folder where I think I must pass template_directory_uri() as a variable.

I have a /js/acf_maps.js in my theme folder that needs to read that variable, i.e., instead of hardcoding this in the js file:

url: 'http://mysite/wp-content/themes/mytheme/img/clustercustomicon.png'

I wanted to have

http://mysite/wp-content/themes/mytheme/

passed as variable and only add the relative path to the customized icon.

Hope this makes sense. Thank you.

Answer 1

I prefer passing variables with wp_localize_script.

$array['theme_url'] = template_directory_uri();
wp_localize_script( 'enqueue_handle', 'variable', $array);

Then access the variable with variable.theme_url in the javascript.

http://codex.wordpress.org/Function_Reference/wp_localize_script

Answer 2

If you create a global javascript variable, you will be able to access it in other js files

var theme_url = '<?php echo template_directory_uri(); ?>';

and in js file,

var icon = window.theme_url+'/img/clustercustomicon.png';