1

So I'm building a custom theme and implemented the Google Map API so I can give it a cleaner feel and so on then the normal Google Map.

I've run into a problem when implementing my Marker as I implement the marker through jQuery but I can't seem to find a way to get the folder my marker is in.

Somehow in my jQuery file I need to get the stylesheet directory uri and then locate my marker

Updated: Solution Below

map.js:

jQuery(document).ready(function($){
    //set your google maps parameters
    var latitude = 52.4680166,
        longitude = -1.8922481,
        map_zoom = 16;

    // Marker Location
    var marker_url = WPD.stylesheet_dir + '/assest/imgs/map/cd-icon-location.png';

functions.php:

// Locate Map Marker
function wpd_scripts() {

    // Fetching the Location
    wp_enqueue_script (
        'wpd_script',
        get_stylesheet_directory_uri() . '/assest/imgs/map/cd-icon-location.png',
        null,
        null,
        false
    );

    // Localize the Marker
    wp_localize_script (
        'wpd_script',
        'WPD',
        array(
            'stylesheet_dir' => get_stylesheet_directory_uri()
        )
    );

}
add_action( 'wp_enqueue_scripts', 'wpd_scripts' );
  • This question is suitable for Stack Overflow because it has nothing to do with WordPress core. – N00b Jan 17 '16 at 23:48
  • But I'm trying to locate the WordPress directory within JavaScript so it is WordPress related really – Stephen Jan 18 '16 at 9:25
2

Enqueue your script and use wp_localize_script to pass data.

function wpd_scripts() {

    wp_enqueue_script(
        'wpd_script',
        get_stylesheet_directory_uri() . '/js/script.js',
        null,
        null,
        false
    );

    wp_localize_script(
        'wpd_script',
        'WPD',
        array(
            'stylesheet_dir' => get_stylesheet_directory_uri()
        )
    );

}
add_action( 'wp_enqueue_scripts', 'wpd_scripts' );

You can then use WPD.stylesheet_dir in your script to get the value you set in PHP.

var marker_url = WPD.stylesheet_dir + '/assest/imgs/map/cd-icon-location.png';
  • I have a question within my JavaScript how would I call the WPD.stylesheet.dir would I include it within the where the quote marks are. 'WPD.stylesheet.dir/assest/imgs/map/cd-icon-location.png' or out like thisWPD.stylesheet.dir'/assest/imgs/map/cd-icon-location.png' – Stephen Jan 18 '16 at 9:30
  • So I did this instead 'WPD.stylesheet.dir' and that didn't seem to work. I changed the location in the function of where the icon is and still didn't work. I've updated my code above to show to see if you can see where I'm making the mistake. Thanks for the help :) – Stephen Jan 18 '16 at 9:43
  • It's a javascript object. WPD is the object name, stylesheet_dir is the property name (note that is an underscore NOT a dot). So it's WPD.stylesheet_dir, no quotes. – Milo Jan 18 '16 at 16:59
  • Yeah the dot was a typo my bad xD I don't think I put my question across that well to be honest, what I mean is how do I called WPD.stylesheet_dir inside my map.js which is in a completely different location to my functions.php As in my JavaScript file I have added the WPD.stylesheet_dir and the marker still doesn't show in the map :/ – Stephen Jan 18 '16 at 19:56
  • WPD.stylesheet_dir is the path to your stylesheet directory. You need to append /assest/imgs/map/cd-icon-location.png to that value. See edit above. Or you can pass the full URL of your image from PHP, it's up to you. – Milo Jan 18 '16 at 20:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.