[Resolved] Passing a toolset custom field into a map

[Author]

Posts

[MarkJames]

I have a toolset map working on the site and want to set the radius from a custom field called radius.

I will also need to set the zoom level to fit the content, but I expect that's not going to be too difficult.

My map code is:

[wpv-map-render map_id="map-1" single_zoom="10" draggable="off" scrollwheel="off" double_click_zoom="off" map_type_control="off" zoom_control="off" street_view_control="off"][/wpv-map-render]
[wpv-map-marker map_id='map-1' marker_id='marker-1' marker_field='wpcf-street-address'][/wpv-map-marker]

The jquery code is:

jQuery(document).on('js_event_wpv_addon_maps_init_map_completed', function (event, event_settings) {
    let map = WPViews.view_addon_maps.get_map(event_settings.map_id);
  	
  
  	//var distance = WPViews.view_addon_maps.markers[mapid];
    google.maps.event.addListenerOnce(map, 'idle', function () {
       //console.log(map_1_markers);
      	var distance = jQuery("input[name='wpcf-radius']").val()
      // console.log(distance);
        
        let coverageCircle = new google.maps.Circle({
            strokeColor: '#ed1c24',
            strokeOpacity: 0.7,
            strokeWeight: 1,
            fillColor: '#ed1c24',
            fillOpacity: 0.15,
            map: map,
            center: map.center,
            radius: 1000
          
        });
    });
});

The map is working fine with a radius of "1000". You will see from the code that I have tried several methods for getting wpcf-radius's value to get passed into the jquery but I haven't found a method that works.

Any help would be appreciated.

Mark

[Waqar]

Hi Mark,

Thank you for contacting us and I'd be happy to assist.

On my test website, I was able to make this work, by following these steps:

1. On the page with the map, I included a hidden span tag with ID "radius-value", that included the shortcode for the radius custom field:

<span id="radius-value" style="display:none;">[types field='radius' output='raw'][/types]</span>

2. Next, I updated the custom script, so that it gets value for the radius from the hidden span tag and then uses it for the radius:

jQuery(document).on('js_event_wpv_addon_maps_init_map_completed', function (event, event_settings) {
  let map = WPViews.view_addon_maps.get_map(event_settings.map_id);

    //var distance = WPViews.view_addon_maps.markers[mapid];
    google.maps.event.addListenerOnce(map, 'idle', function () {
      //console.log(map_1_markers);
      var distance = jQuery("span#radius-value").text()
      // console.log(distance);

      let coverageCircle = new google.maps.Circle({
        strokeColor: '#ed1c24',
        strokeOpacity: 0.7,
        strokeWeight: 1,
        fillColor: '#ed1c24',
        fillOpacity: 0.15,
        map: map,
        center: map.center,
        radius: parseInt(distance)
      });
    });
});

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[MarkJames]

Thanks Waqar this worked perfectly.

I didn't realise that you needed to output the content onto the page for the jQuery to pick it up, but it makes sense now.

[MarkJames]

My issue is resolved now. Thank you!