First of all you should alway separate php from javascript.
Generally talking, it’s a bad practise mix them, and specifically to WordPress, it also force you to add javascript inline instead using the WordPress proper way: using wp_enqueue_script.
When you need pass variables from PHP to javascript, the proper WordPress way to do it is using wp_localize_script.
So, your javascript code should be just something like this:
jQuery(document).ready(function($){
var myMarkers = {"markers": [ my_map_data.markers ] };
$("#map").mapmarker({
zoom : 7,
center : 'Liverpool',
markers : myMarkers
});
});
Readable, isn’t it? Also note how I have used jQuery no conflict wrapper, this because I hope you are enqueuing jQuery properly, (i.e. using wp_enqueue_script to load the WP embedded jQuery version) and if so WordPress use jQuery in no conflict mode, so to make it works you should use no confict wrappers.
Now that you have the code above, you should save it in a file, and call it e.g. my-map.js and save in your theme (sub)folder (or in your plugin folder, if you are developing a plugin).
Assuming here you save that file in ‘js’ subfolder of your theme.
Now you have to include in the right template. I don’t know where you are printing the map, and I assume here you have a page template called 'page-map.php' and you want to include there your map, so you have to include there your javascript.
In your functions.php you should add:
add_action('wp_enqueue_scripts', 'add_map_scripts');
function add_map_scripts() {
if ( is_page_template('page-map.php') ) {
$jsurl = get_template_directory_uri() . '/js/my-map.js';
wp_enqueue_script('my-map', $jsurl, array('jquery') );
wp_localize_script('my-map', 'my_map_data', get_map_data() );
}
}
This is the proper way to add the script in WordPress. If you look ad wp_enqueue_script docs I’ve linked, you can see I’ve added a 3rd argument to the function, it is the dependency array, whatever script you added in the array, if not already included in the page will be added, and also your script will be included after that. I’ve included jQuery, in the dependency array, in this way I’m sure jQuery will be added to the page: if you are manually adding jquery to page… remove it.
You said you are using a plugin that have its own js script, you should look at the handle of this script (it’s the first param of wp_enqueue_script) and add it to the dependency array, in this way you are sure your script is added after the plugin script.
Now if you loow at the javascript code I posted, you note that the markers array is taken from my_map_data.markers variable. But where this variable is defined?
The answer is in the wp_localize_script that I called in the code above, just after wp_enqueue_script. If you see the wp_localize_script docs I’ve linked above, you see that I’m passing an object to the script called 'my_map_data' and the content of that object is what is returnd by get_map_data function. this function does not exist yet, so let’s write it (should go in your functions.php):
function get_map_data() {
// assure we are in right page
if ( ! is_page_template('page-map.php' ) return;
$areas = new WP_Query( array(
'post_type' => 'area', 'post_status' => 'publish', 'posts_per_page' => -1,
'orderby' => 'date', 'order' => 'desc'
) );
if ( ! $areas->have_posts() ) return; // no areas, nothing to do
$markers = array();
while ( $areas->have_posts() ) : $areas->the_post();
global $post; // current area post object
$deals_args = array(
'post_type' => 'deal', 'post_status' => 'publish', 'numberposts' => -1
'post_parent' => $post->post_parent
);
$d_num = count( get_posts($deals_args) );
$ballon_f="We have <span>%d</span> deals in <strong>%s</strong>";
$ballon_f .= '<br/><a href="https://wordpress.stackexchange.com/questions/121513/%s">View deals</a>';
$marker = array(
'latidude' => get_post_meta( get_the_ID(), '_arealat', true),
'longitude' => get_post_meta( get_the_ID(), '_arealong', true),
'icon': get_template_directory_uri() . '/assets/img/design/logo-icon.png',
'baloon_text' => sprintf($ballon_f, $d_num, get_the_title(), get_permalink() );
);
$markers[] = (object) $marker; // collect all markes in the $markes array
endwhile;
wp_reset_postdata(); // reset the post data after the custom query
// return the array of markes to wp_localize_script that will json_encode it and
// pass it to javascipt
return array( 'markers' => $markers );
}
Now our function return an array to wp_localize_script and that function convert this array in JSON, and pass it as global object (named ‘my_map_data’) to the javascript. In this way when in javascript you use
{"markers": [ my_map_data.markers ] };
It will contain the array of object created by get_map_data function.