In this tutorial, you’ll see how to display “Progress Map” search form within the filter area of the extension “List & filter”.
By using this code, the search form will be removed from the map and displayed within the filter area!
- Edit your map.
- Click on the menu “Search form settings”.
- Select the option “Search form option => Yes”.
- Edit the file “functions.php” of your theme/child theme and copy/paste the following code in it:
In the following code, make sure to edit IDs in the variables $post_ids_array and $map_ids_array to your page & map IDs!
/**
* Display "Progress Map" search form before or after the list's filter
* @since "PM v3.0"
*/
function cspml_filter_searh_form($map_settings, $map_id){
if (!class_exists('CspmMainMap'))
return;
$CspmMainMap = CspmMainMap::this();
global $post;
/**
* The page IDs where the map can be displayed */
$post_ids_array = array(10,20,30);
/**
* The map IDs to target */
$map_ids_array = array(15,25,35);
if(in_array($post->ID, $post_ids_array) && in_array($map_id, $map_ids_array)){
/**
* Hide the search form from the map
* Don't change this to TRUE! */
$map_settings[$CspmMainMap->metafield_prefix.'_search_form_option'] = 'false';
/**
* Display the search form before or after the filter.
*
* Hook | "cspml_before_filter_form" | Display before the filter
* Hook | "cspml_after_filter_form" | Display after the filter
*/
wp_enqueue_style('jquery-ion-rangeslider');
wp_enqueue_script('jquery-ion-rangeslider');
add_filter('cspml_before_filter_form', function($default_output, $map_id){
$CspmMainMap = CspmMainMap::this();
wp_add_inline_script('cspml-script',
'var input = document.getElementById("cspm_address_'.$map_id.'");
var autocomplete = new google.maps.places.Autocomplete(input);
jQuery(document).on("click", "a[class^=cspm_reset_search_form], a[class^=cspm_submit_search_form_]", function(event){
setTimeout(function(){
jQuery("html, body").animate({
scrollTop: jQuery("div.cspml_listings_area_'.$map_id.'").offset().top-140
});
}, 500);
});'
);
wp_add_inline_style('cspm-style',
'div.search_form_container_'.$map_id.' form label{
font-size: 14px !important;
}
@media (max-width: 767px){
div[class^=search_form_container_] {
left:0px !important;
width: auto !important;
}
}'
);
$output = '';
$output .= $CspmMainMap->cspm_search_form(array(
'map_id' => $map_id,
'carousel' => 'no',
'custom_css' => 'display:block; position:relative; min-width:100%; margin-bottom:20px; top:0;',
'extensions' => add_filter('cspm_ext_name', function(){ return 'cspml_list'; }),
'open_btn' => false,
));
$output .= '';
return $output;
}, 10, 2);
}
return $map_settings;
}
add_filter('cspm_map_settings', 'cspml_filter_searh_form', 10, 2);