WordPress Google Maps in Custom Theme

Question

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' );

Answer 1

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';