This add-on generates a map to display geocoded results. It can also filter results by showing only results within the map bounds.

Usage

This add-on generates a Map facet type, which works just like any other facet type.

The Data Source should be a custom field containing a comma-separated latitude, longitude.

Common data sources:

• • Advanced Custom Fields has a Google Maps field type that provides geolocation. For the facet’s Data Source, choose the field name underneath the “Advanced Custom Fields” header.
  • WP Job Manager plugin automatically stores geolocation data. Set the facet’s Data Source to geolocation_lat.

Marker content

Enter display code for the content that displays when a marker is selected. The following example outputs the title, link, and excerpt.

<h3>
  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
    <?php the_title(); ?>
  </a>
</h3>
<?php the_excerpt(); ?>

Available options

Using a Google Maps API Key

The map facet requires a valid Google Maps API key. After generating an API key, add it to Settings > Facet > Settings. Both the proximity facet and map facet will use this key.

Customizing the marker pins

add_filter( 'facetwp_map_marker_args', function( $args, $post_id ) {
    $args['icon'] = 'https://URL/TO/marker.png';
    return $args;
}, 10, 2 );

For more flexibility, you could alternatively use arrays to mimic Google’s JS objects:

add_filter( 'facetwp_map_marker_args', function( $args, $post_id ) {
    $args['icon'] = array(
        'url' => 'https://URL/TO/YOUR/marker.png',
        'scaledSize' => array(
            'width' => 16,
            'height' => 16
        )
    );
    return $args;
}, 10, 2 );

Map marker hooks

FacetWP provides javascript hooks to perform actions when markers are interacted with.

FWP.hooks.addAction('facetwp_map/marker/click', function(marker) {
    /**
     * The post ID associated with the active marker
     */
    var post_id = marker.post_id;
    /**
     * The following code adds the CSS class "is-active" to the active post,
     * assuming each result's HTML is structured similarly to:
     * <div class="post-item" data-id="123">Hello World!</div>
     */
    $('.post-item').removeClass('is-active');
    $('.post-item[data-id="' + post_id + '"]').addClass('is-active');
});

In addition to click, FacetWP also supports mouseover and mouseout events.

On the flip side, if you want to find all markers associated with a POST_ID, you could use:

var markers = FWP_MAP.get_post_markers(THE_POST_ID);