So i have been looking for a couple of days now and cant find a solution to this anywhere. It is a fairly bespoke request from a client... I am using a jQuery google maps plugin to add markers for each post (area) that the admin creates using a custom meta box with lat and long coordinates.

Each of these markers has a tooltip associated with it. In the tool tip i have got some text, the title of each post used to create the marker itself and a permalink to the post (area).

But i would like to display a count of all children posts (deals) of each of the posts (areas).

I have this working on the (area) posts themselves but cannot get them to display in my map tooltips.

This is the code i have so far i dont think i am far away from a solution but my php skills are still at a novice level so any help would be much appreciated.

<script type="text/javascript">
        var myMarkers = {"markers": [
            <?php $items3 = new wp_Query( array(
                'post_type' => 'area',
                'post_status' => 'publish',
                'posts_per_page' => -1,
                'orderby' => 'date',
                'order' => 'desc',
            ) );
            $post_id = $post->ID; //or somehow get the current post ID.
            $parent_id = get_post_ancestors($post_id);
            $parent = get_post_type( $parent_id );
            $args = array(
                'post_type' => 'deal',
                'post_status' => 'published',
                'post_parent' => $parent,
                'numberposts' => -1
            $num = count( get_posts( $args ) );
            while ( $items3->have_posts() ) : $items3->the_post(); ?>
                        {"latitude": "<?php echo get_post_meta($post->ID, '_arealat', true); ?>", "longitude": "<?php echo get_post_meta($post->ID, '_arealong', true); ?>", "icon": "/wp-content/themes/localdoubleglazingdeals/assets/img/design/logo-icon.png", "baloon_text": 'We have <span><?php echo $num ?></span> deals in <strong><?php the_title(); ?></strong><br/><a href="<?php the_permalink(); ?>">View deals</a>'},
            <?php endwhile; ?>
        zoom    : 7,
        center  : 'Liverpool',
        markers : myMarkers

it is the...

<?php echo $num ?>

part i am stuck on.

  • 1
    This isn't an answer but a nudge - Instead of manually constructing your JS arrays, use wp_localize_script. It's simpler and prevents having to manually deal with issues like having a comma after the last array element which is not technically correct in JS. Nov 7, 2013 at 0:59

1 Answer 1


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:

  var myMarkers = {"markers": [ my_map_data.markers ] };
    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="%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
  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.

  • You sir are a very kind person. Thankyou for putting as much effort as you have to school a novice such as myself. I will try to implement this when I get home this evening and will up vote your answer too... @G. M. Nov 7, 2013 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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