Skip to content

Custom marker depending on a custom field value

Dylan Kuhn edited this page Apr 5, 2015 · 4 revisions

This is a user-contributed guide.

Introduction

What is going to be implemented in this tutorial is the ability to show a special map marker for the post according to a custom date field value. The code compares the date entered in the custom field to today's date and show the configured special marker in case that date is passed.

The following code can be used to monitor some events, and show special marker for the finished ones.

Steps

Add the following to the functions.php file of your theme (WP_DIRECTORY/wp-content/themes/YOUR_THEME/functions.php) :

function my_geo_mashup_locations_json_filter( $json_properties, $queried_object ) {
       $post_id = $queried_object->object_id;
       $key = 'KEY_OF_YOUR_DATE_CUSTOM_FIELD';
       $meta_field = get_post_meta( $post_id, $key, true );
       $complete_date = strtotime( $meta_field );
       $todays_date = time();

       if ( $todays_date > $complete_date ) {
           $json_properties['my_complete'] = 1;
       }
       else {
           $json_properties['my_complete'] = 0;
       }

       return $json_properties;
}
add_filter( 'geo_mashup_locations_json_object', 'my_geo_mashup_locations_json_filter', 10, 2 );

Replace the following:

KEY_OF_YOUR_DATE_CUSTOM_FIELD :: Put here the key of the custom field you want to take the date from. Note that it should be in the following format: YYYY-MM-DD. If you used More Fields plugin to add the date field, like I did, then just choose 'date' as the field type. If using More Fields plugin, you can specify the key you want for the field from 'Custom field key' option. Remember to keep the quotation marks.

In case you already didn't, install the Geo Mashup custom plugin, as mentioned here, and add the following to the file custom.js in geo-mashup-custom folder (create the file if doesn't exist):

GeoMashup.addAction( 'objectIcon', function( properties, object ) {
       // Use a special icon in case the custom 'complete' var is set to 1
       if ( object.my_complete == 1 ) { 
               object.icon.image = properties.template_url_path + '/YOUR_PATH/YOUR_NEW_MARKER.PNG';
       }
} );

Replace the following:

/YOUR_PATH/YOUR_NEW_MARKER.PNG :: the path of your special marker under your active theme's directory (e.g. if your image was in: WP_DIRECTORY/wp-content/themes/YOUR_THEME/images/custom.png, you would enter: '/images/custom.png' after properties.template_url_path +). Don't forget the slash in the first.

Clone this wiki locally