I'm trying to create something similar to this page : hidden link
Two main things that I wasn't able to do:
1- I was able to have the pin be different on hover BUT they don't remain different as they are selected. I would like to have a specific pin when selected and hover and another pin (transparent) otherwise. Is it possible?
2- When we click on a pin, I would like the specific listing to also be featured on the right side of the page, where my listing view is showing. Is it possible?
Is there any documentation that you are following?
Hello. Thank you for contacting the Toolset support.
It's possible but it's a bit different.
You can auto-login to the site using the following link:
=> hidden link
Please check the following test site I've created for you and you can see the map at bottom of the page:
=> hidden link
- if you hover the marker it will display the different hover marker.
- if you click on any of the post title link give under the map, it will display the associated marker.
You can check how its achieved by adding the "Fields and text" block and that block holds the marker and focus on hover:
=> hidden link
[the last block view namely "Gyms Simple"]
I'm already using both the features you are mentioning here (different pin on hover and map focus on marker when click).
You can see what I did here : hidden link
What I'm asking is :
1- having the specific pin showing on hover staying on when selected. In both you example and my website, you can see that even if you have selected a pin once the mouse moves away, the pin goes back to its "standard" appearance.
2- Instead of clicking on the listing and having the associated pin displayed (which I was able to do), I would like it to be the other way around - meaning having the associated listing showing up when clicking on a pin.
1- having the specific pin showing on hover staying on when selected. In both you example and my website, you can see that even if you have selected a pin once the mouse moves away, the pin goes back to its "standard" appearance.
===>
To change the marker icon on click you will have to use the custom JS code.
What if you try to use the following custom JS code, you should adjust as required:
jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_completed',function(event_settings) {
var markers = WPViews.view_addon_maps.markers;
var map_1_markers = markers['map-1']; // here replace "map-1" with your map ID
//console.log(map_1_markers);
for(var i in map_1_markers) {
var marker = map_1_markers[i];
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
marker.setIcon("<em><u>hidden link</u></em>");
};
})(marker, i));
}
});
- Change the marker image URL with setIcon as required. currently its set to: hidden link
You should try to add the above custom JS code to your content template's JS box or to your view's JS box.
2- Instead of clicking on the listing and having the associated pin displayed (which I was able to do), I would like it to be the other way around - meaning having the associated listing showing up when clicking on a pin.
===>
There is no such feature to highlight the view list item when you click on pin. It will require custom workaround again. Please check the following related ticket that may help you:
- https://toolset.com/forums/topic/highlight-a-view-list-item-from-a-google-map-click/
I have added the following code to my content template (where the map is)
jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_completed',function(event_settings) {
var markers = WPViews.view_addon_maps.markers;
var map_1_markers = markers['map-5']; // here replace "map-1" with your map ID
//console.log(map_1_markers);
for(var i in map_1_markers) {
var marker = map_1_markers[i];
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
marker.setIcon("/wp-content/uploads/2022/04/pin_orange-1.png");
};
})(marker, i));
}
});
But it doesn't change anything. Should I also change the map_1 ?
Thank you!
Can you please share admin access details let me check whats going wrong there.
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.
I have set the next reply to private which means only you and I have access to it.
jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_completed',function(event_settings) {
var markers = WPViews.view_addon_maps.markers;
var map_1_markers = markers['map-5']; // here replace "map-1" with your map ID
//console.log(map_1_markers);
for(var i in map_1_markers) {
var marker = map_1_markers[i];
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
marker.setIcon("<em><u>hidden link</u></em>");
};
})(marker, i));
}
});
Please try to remove the browser cache and then try to click on map pin, I can see its working. Can you please confirm it works at your end as well.
jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_completed',function(event_settings) {
var markers = WPViews.view_addon_maps.markers;
var map_1_markers = markers['map-5']; // here replace "map-1" with your map ID
//console.log(map_1_markers);
for(var i in map_1_markers) {
var marker = map_1_markers[i];
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
for (var j in map_1_markers) {
map_1_markers[j].setIcon("<em><u>hidden link</u></em>");
}
marker.setIcon("<em><u>hidden link</u></em>");
};
})(marker, i));
}
Could you please confirm it works as expected: hidden link
