html - I need to use PHP in a javascript file because of Wordpress, how can I do that or whats a better alternative -

html - I need to use PHP in a javascript file because of Wordpress, how can I do that or whats a better alternative -

i using google map plugin, this one exact.

anyways google map plugin gives me options alter settings custom markers , lot of other useful things. changed main marker own image , works great on static html site in wordpress not , why.

so lets load plugin in so:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="js/gmaps.js"></script>

now have options can alter in footer or in wordpress through themes_js , load in functions.php , here are:

var map = new gmaps({ div: '#map', lat: 94.09454, lng: -219.35574 }); map.drawoverlay({ lat: 94.09454, lng: -219.35574, content: '<div class="map-logo"><img src="images/logo.png" alt=""></div>' });

now problem in content when seek alter image wordpress not image if it's src="images/logo.png" have src="<?php bloginfo('template_directory'); ?>/images/logo.png" , thing themes.js file phone call javascript in wont read php , need utilize <?php bloginfo('template_directory'); ?>.

so how can go showing image because way can customize through parameters have provided through javascript , can't utilize html phone call custom marker image called logo.

im sure im not 1 has ran problem so. have idea??

update

so have tried wp_localize_script method , 2 things happen.

i dont see image not in broken link cannot see @ all my entire url displays in header reason

here functions.php called wp_localize_script:

/** * enqueue scripts , styles. */ function loading() { global $wp_scripts; wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css' ); wp_enqueue_style( 'main-style', get_stylesheet_uri() ); wp_enqueue_style( 'owlcarousel_css', get_template_directory_uri() . '/owl-carousel/owl.carousel.css' ); wp_enqueue_style( 'owltheme_css', get_template_directory_uri() . '/owl-carousel/owl.theme.css' ); wp_enqueue_style( 'animate_css', get_template_directory_uri() . '/css/animate.css' ); wp_enqueue_style( 'google_fonts', 'http://fonts.googleapis.com/css?family=open+sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' ); wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), '', true ); wp_enqueue_script( 'owl_js', get_template_directory_uri() . '/owl-carousel/owl.carousel.js', array('jquery'), '', true ); wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery', 'bootstrap_js'), '', true ); wp_enqueue_script( 'viewport_js', get_template_directory_uri() . '/js/jquery.viewportchecker.js', array('jquery'), '', true ); wp_enqueue_script( 'maps_js', get_template_directory_uri() . '/js/gmaps.js', array('jquery'), '', true ); wp_enqueue_script('maps_custom', get_stylesheet_directory_uri() . '/js/maps-custom.js'); wp_localize_script('maps_custom', 'mapscustom', array( 'templateurl' => bloginfo('template_directory'),)); wp_register_script ('html5_shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false ); wp_register_script ('respond_js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false ); $wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt ie 9' ); $wp_scripts->add_data( 'respond_js', 'conditional', 'lt ie 9' ); } add_action( 'wp_enqueue_scripts', 'loading' );

and here maps_js phone call map on:

jquery(document).ready(function( $ ) { var href = mapscustom.templateurl + '/images/logo.png'; var map = new gmaps({ div: '#map', lat: 22.22222, lng: -22.22222 }); map.drawoverlay({ lat: 22.22222, lng: -22.22222, content: $href }); });

use wp_localize_script() pass kind of info loaded scripts, in case need bloginfo('template_directory'):

wp_enqueue_script('my-script', get_stylesheet_directory_uri() . '/js/my-script.js'); wp_localize_script('my-script', 'myscript', array( 'templateurl' => bloginfo('template_directory'),));

now have access myscript.pluginsurl in script file:

var href = myscript.templateurl + '/path/to/resource';

generally, can not utilize php in js file.so wordpress provide wp_localize_script().with help of can localize path , pass localize js file.so work.

above have given illustration how can achieve.modify according need.

hope solve problem.

php html css wordpress maps