Many users have requested the ability to have a specific type of location displayed by default, while still having access to other locations added to the map. For example, perhaps you only want to display "campgrounds" by default, but also would like to allow results for "Hotels" if chosen by your users in the dropdown.
While not available directly as a part of the plugin, the needed functionality can be achieved using a little bit of JavaScript:
<script type="text/javascript">
jQuery(window).load(function(){
setTimeout(() => {
jQuery('select[name="mpfy_tag"]').val(TAG_TERM_ID).trigger('change');
}, 100);
});
</script>
The example uses window.load() but document.ready() may also work. TAG_TERM_ID should be replaced with the internal WordPress tag ID for the particular tag you want to be selected when the page loads.
Comments
22 comments
How can I get this to work with the latest version of MapifyPro?
(Assume my tag id is 16) do I use val('16') or val(16)?
I figured it out (there may be a better way to do this):
<script>
(function($){
$(window).load(function(){
$('select[name="mpfy_tag"]').val(TAG_ID).trigger('change');
});
})(jQuery);
</script>
Where do I have to add this piece of code?
Hi Francisco,
You can call it from your functions.php, and have it add to WP_Head.
I'll give you two examples (and I'm going to add some extra detail for others who may come to this page as well.)
**** EXAMPLE 1 ****
// Adds the custom Mapify Pro filter script, inline to the wp_head on all pages of your website. The if condition makes sure the Jquery file has already been loaded before adding. Change 99 to match the ID you want to filter for on default.
**** EXAMPLE 2 ****
// Adds the script custom Mapify Pro filter script, inline to the wp_head only the page you specify. If you only have a map on one page, there is no need to load the script on other pages. Same as above with the ID. Also just replace 'SLUG' with the page slug of the page you want this to load on.
Hope this helps.
Hello Rwilson,
Many thanks for this great solution.
I would like to use example 2. I use Avada and added the code above in the header via the Avada menu.
The filter is working properly, however at the very bottom of the page it gives code at the frontend,please see below. Do I need to do anything else than adding the code to the header?
"function mapifypro_filter_custom_script() { if ( is_page( 'granfondo-mont-ventoux' ) && wp_script_is( 'jquery', 'done' ) ) { ?>"
Thanks
Robert
"The filter is working properly, however at the very bottom of the page it gives code at the frontend"
If I am understanding you right, the code is being printed on the frontend of the website (so visitors can see PHP).
When you say you added it via the Avada menu, do you mean the Theme Fusion editor (i.e. https://theme-fusion.com/wp-content/uploads/2013/09/fto_generaltab.jpg )? You can't add PHP in any of those fields, it strips out the PHP, and that is why it is showing up on the front end.
So you have two options:
1. Add it via the functions.php or custom_functions.php in Avada as I described.
2. Only add the code between the < SCRIPT > tags to the Head via the Avada Menu.
Hope this helps!
Hello,
Thanks for your answer. Please forgive me my ignorance, but I can't this seem to have done...
After reading your reply it is clear for me I can't add the whole code to the Theme Fusion editor, which indeed was what I meant.
So I added the code below first to avada/framework/custom_functions.php (at the end), but this didn't work. I mean the filter didn't work.
After that I tried changing the avada/functions.php, but this didn't work either..
The code I used is as follows:
function mapifypro_filter_custom_script() {
if ( is_page( 'granfondo-mont-ventoux-route' ) && wp_script_is( 'jquery', 'done' ) ) {
?>
<script>
(function($){
$(window).load(function(){
$('select[name="mpfy_tag"]').val(167).trigger('change');
});
})(jQuery);
</script>
<?php
}
}
add_action( 'wp_head', 'mapifypro_filter_custom_script' );
Hopefully you can help me out. Thanks!
Robert
I'm thinking your issue could be:
A. The page slug you are using is wrong
B. The select name tag is now different (there have been several updates since I posted this)
C. You may need to replace 'wp_head' with 'wp_footer' in the function above, see if that works.
D. '$' is causing a conflict and you need to use 'jQuery' in place of '$'.
Do you have a URL to see this web page or are you developing on your computer? I might be able to point it out if you have a URL I could view.
Hi,
Sorry I had to rechange and put the first script you gave above on the website because of needed functionality.
Could you please let me know when you could have a look then I can rechange it again with the 2nd script with php.
Thanks
"Could you please let me know when you could have a look then I can rechange it again with the 2nd script with php."
You never sent the URL for me to look at...
Hello did you see my reply now?
Thanks
No. It is probably filtering out your URL.
Hi,
Lets try again. Three replies are still status "pending approval", in one of these messages there is not an url, so no clue why it is filtered.
Anyway I try again now:
- I added the script above to the custom functions file
- The url is http://goo.gl/xxlKfc
Hopefully you can help me out. Thanks.
Thanks for posting your link, I figured out the problem.
The URL you provided is not a 'page' it's a 'post'. The function I wrote checks if the PAGE is granfondo-mont-ventoux-route.
If you do "view source" and search for this script, it isn't on the page.
(The post ID is 13312, which I got from the Body Class.)
I have updated it below
```
function mapifypro_filter_custom_script() {
if ( is_single(13312) && wp_script_is( 'jquery', 'done' ) ) {
?>
<script>
(function($){
$(window).load(function(){
$('select[name="mpfy_tag"]').val(167).trigger('change');
});
})(jQuery);
</script>
<?php
}
}
add_action( 'wp_head', 'mapifypro_filter_custom_script' );
```
If for some reason it doesn't show up in your source code or still isn't working, replace with this one below (NOTE: it will load on all Post Type pages.)
```
function mapifypro_filter_custom_script() {
if ( is_single() && wp_script_is( 'jquery', 'done' ) ) {
?>
<script>
(function($){
$(window).load(function(){
$('select[name="mpfy_tag"]').val(167).trigger('change');
});
})(jQuery);
</script>
<?php
}
}
add_action( 'wp_head', 'mapifypro_filter_custom_script' );
```
If it still doesn't work, and the code IS showing up in the source code, try disabling W3 Total Cache for that page.
Hope this helps!
Hi,
Many thanks. It is working now!
Stupid thing is I thought about it before wether the script would have to be different for posts, but after googling a bit I thought it would work for posts aswell. Well, I was wrong...
I first tried your new script for one post and it is working. Because I've more maps where I would like to show only specific map tags after loading I tried the following, which is working for me on both maps now.
After trying to read the script I thought I would have to give the function a unique name like function mapifypro_filter_custom_script1 and then in the action line call this specific script. Is this the correct way if I would like to filter out results on more map (posts) ?
"function mapifypro_filter_custom_script() {
if ( is_single(13312) && wp_script_is( 'jquery', 'done' ) ) {
?>
<script>
(function($){
$(window).load(function(){
$('select[name="mpfy_tag"]').val(167).trigger('change');
});
})(jQuery);
</script>
<?php
}
}
add_action( 'wp_head', 'mapifypro_filter_custom_script' );
function mapifypro_filter_custom_script1() {
if ( is_single(13090) && wp_script_is( 'jquery', 'done' ) ) {
?>
<script>
(function($){
$(window).load(function(){
$('select[name="mpfy_tag"]').val(160).trigger('change');
});
})(jQuery);
</script>
<?php
}
}
add_action( 'wp_head', 'mapifypro_filter_custom_script1' );"
I have a comment Pending Approval...
Did you end up getting it to work the way you detailed?
Hi!
I used the code from option 1, BUT the map re-loads in order to show the change.
function mapifypro_filter_custom_script() {
if ( wp_script_is( 'jquery', 'done' ) ) {
?>
<script>
(function($){
$(window).load(function(){
$('select[name="mpfy_tag"]').val(16).trigger('change');
});
})(jQuery);
</script>
<?php
}
}
add_action( 'wp_head', 'mapifypro_filter_custom_script' );
Is there a way to make it load the change the first time with no second load?
http://livevillagewest.com/location/
Thanks!
Hello,
I have found this workaround but this feature it´s completely a must in the Mapify Pro plugin.
It doesn´t make any sense that the first view of a custom map is the main view of the main map.
At least, it should be selectable from the Admin which is the main view of the map you are working on.
Regards.
@Kiza - Since it's a Window Load function, maybe you don't really need to wait for jQuery.
(All I removed was the condition at the top, and the second bracket at the bottom).
Try this and see if it makes any difference.
function mapifypro_filter_custom_script() {
?>
<script>
(function($){
$(window).load(function(){
$('select[name="mpfy_tag"]').val(16).trigger('change');
});
})(jQuery);
</script>
<?php
}
add_action( 'wp_head', 'mapifypro_filter_custom_script' );
If it doesn't, there may be a way to do it by temporarily hiding the visibility of the entire map div on page load, then fading it in after a few seconds with jQuery (so it can load and reset the pins without anyone seeing it.) That's a little more complicated, hopefully above works better.
@Pablo
Just a heads up, I'm not the developer on this plugin. I just was answering a question on this thread and hopefully helping someone and save them time in the process.
I'd recommend "Submitting a Request".
It's a link in the top menu bar of this page.
Hi @Rwilson,
Thank you for your suggestion. I will!
Can this also be used just to hide all categories? I do not use categories for the map locations - nor do I want to. BUT - I cannot have all of my locations load. The user needs to search for their desired location first.
Please sign in to leave a comment.