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, 3 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.

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, 3 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!