Change Google map marker on click

This thread is resolved. Here is a description of the problem and solution.

Problem:

I've setup a Google map with CPT markers. It works fine, but I'd like to change the marker on click.

Solution:

It is possible with custom JS codes, for example:

https://toolset.com/forums/topic/change-google-map-marker-on-click/#post-1762225

Relevant Documentation:

This support ticket is created 4 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 2.19 hours from now. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Tagged: Toolset Maps, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by umbertoZ 4 years, 2 months ago.

Assisted by: Luo Yang.

Author

Posts

August 31, 2020 at 8:20 am #1762153

umbertoZ

Hi, I've setup a Google map with CPT markers. It works fine, but I'd like to change the marker on click. Can you help me with some custom code to do it. I found this solution, but I don't know how to implement it in a View:

hidden link

thnaks

August 31, 2020 at 9:03 am #1762225

Luo Yang

Hello,

It is possible with custom JS codes, for example:

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 () {
          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));
    }
});

Please replace replace "map-1" with your map ID

August 31, 2020 at 9:14 am #1762229

umbertoZ

My issue is resolved now. Thank you!