[Resolved] Address field w/ multiple addresses within single post. Multiple markers?

[Author]

Posts

[MichaelR9215]

Hello,

I have a post with multiple addresses entered. I am using the post field for address, and I have it set for multiple instances.

I need to loop through the addresses in two places, the first is within a map, using markers. The second is to display all addresses below the map.

I was able to get all of the individual addresses displayed using:

  <div class="business-location">
    [wpv-for-each field="wpcf-business-location"]
      <div class="business-location-item">[types field='business-location'][/types]</div>
    [/wpv-for-each]
  </div>

However, when I try to do the same thing for the map markers, all of the markers are displaying the same address ... it is the last field entry.

This is the code I am using:

 
<div class="business-map">
  [wpv-map-render map_id='map-2']
    [wpv-for-each field="wpcf-business-location"]
      [wpv-map-marker map_id='map-2' marker_id='marker-2' marker_title="[types field='business-location' output='raw'][/types]" marker_field='wpcf-business-location' id='$posttype']
        <a href="<em><u>hidden link</u></em> field='business-location' format='FIELD_LATITUDE, FIELD_LONGITUDE'][/types]/" target="_blank">
          <button type="button" class="btn btn-primary">Get Directions</button>
        </a>
      [/wpv-map-marker]
    [/wpv-for-each]
</div>

I have a feeling it is because I am using the same static marker_id within the wpv-for-each loop, but I can't be sure.

Is there a way to grab a dynamic field id like with for the multiple marker maps?

Like:

  [wpv-map-marker map_id='map-search' marker_id='marker-[wpv-post-id]' marker_field='wpcf-business-location'][/wpv-map-marker]

Where the marker_id uses marker-[wpv-post-id]?

The difference, however, is that in one map, I am looping through multiple posts, and in the map I am having trouble with, I am in a single post, and looping only through the multiple address fields.

I hope I have provided enough detail. Please let me know if you have any questions.

Thanks!

[Luo Yang]

Dear Michael,

I suggest you create a custom shortcode to get the index of each marker, for example:
1) Add these lines to functions.php in your theme folder:

add_shortcode('incrementor', 'incrementor');
function incrementor() {
static $i = 1;
return $i ++;
}

2) setup the [wpv-map-marker] shortcode like this:
[wpv-map-marker marker_id='marker-[wpv-post-id]-[incrementor]' ...]

[MichaelR9215]

I was close! I did the incrementor shortcode, but I added it to the map marker wrong.

Let me try this, and I'll let you know.

Thanks!

[MichaelR9215]

Unfortunately, this did not work. Are you sure I should be using [wpv-post-id]? This is not pulling from posts, it is on one single post, and is pulling for a post address field that has multiple entries.

Please advise.

Thanks!

[MichaelR9215]

I did a test and added the [incrementor] to the loop, but not in the market, and it counted 1 2 3 ...

Then, I did:

marker_title='[incrementor]'

This made the map markers disappear, and the map zoomed out to nothing.

For some reason, this custom incrementor is conflicting with something.

[MichaelR9215]

I did some testing, and this is what I know:

I have a button within the marker. When I wrap the entire marker inside the for each, the markers are in the correct location on the map according to the address, but the button inside the marker that is supposed to have the correct Google link only uses the address coordinates from the last entry of the loop.

I pulled the button outside the marker, but still inside the for each loop, and the buttons worked, and had the correct link/coordinates!

Then, I pulled the marker outside the loop, and used the for each inside the marker with the button ... well, then each marker had three buttons, with all three addresses!

So, the combination I need ... the for each loop wrapped around the marker, and the marker wrapped around the button ... does not work. This code is below. I could use some guidance on how to get the correct address to show up for each marker button.

  <div class="business-map">
    [wpv-map-render map_id='map-2']
    [wpv-for-each field="wpcf-business-location"]     
      [wpv-map-marker map_id='map-2' marker_id='marker-2' marker_field='wpcf-business-location']
        <a href="<em><u>hidden link</u></em> field='business-location' format='FIELD_LATITUDE, FIELD_LONGITUDE'][/types]/" target="_blank">
          <button type="button" class="btn btn-primary">Get Directions</button>
        </a> 
      [/wpv-map-marker]
    [/wpv-for-each]
  </div>

Thanks!

[Luo Yang]

Sorry, you will need try as I mentioned above:
https://toolset.com/forums/topic/address-field-w-multiple-addresses-within-single-post-multiple-markers/#post-440283

and plus this step:
Dashboard-> Toolset-> Settings-> Front-end Content
in option "Third-party shortcode arguments", fill the custom shortcode name "incrementor"

I tested it in my localhost, it works fine. please let me know if you need more assistance for it.

[MichaelR9215]

I'm sorry Luo, but it does not work fine.

This part:

 <a href="<em><u>hidden link</u></em> field='business-location' format='FIELD_LATITUDE, FIELD_LONGITUDE'][/types]/" target="_blank">
        <button type="button" class="btn btn-primary">Get Directions</button>
      </a> 

...does not change within the loop.

I changed everything, so it is using the incrementor, and the shortcode is registered ... it still does not work.

Just to clarify, you checked in your localhost exactly how I am writing it?

My setup is like this:

A single post with a custom post field for address.
The address field is set to have multiple entries.
I add 3 addresses.

My code in the view:

     <div class="business-map">
    [wpv-map-render map_id='map-2']
    [wpv-for-each field="wpcf-business-location"]     
      [wpv-map-marker map_id='map-2' marker_id='marker-[wpv-post-id]-[incrementor]' marker_field='wpcf-business-location']
        <a href="<em><u>hidden link</u></em> field='business-location' format='FIELD_LATITUDE, FIELD_LONGITUDE'][/types]/" target="_blank">
          <button type="button" class="btn btn-primary">Get Directions</button>
        </a> 
      [/wpv-map-marker]
    [/wpv-for-each]
  </div>

Pay close attention to this:

  [wpv-map-marker map_id='map-2' marker_id='marker-[wpv-post-id]-[incrementor]' marker_field='wpcf-business-location']
      
  <a href="<em><u>hidden link</u></em> field='business-location' format='FIELD_LATITUDE, FIELD_LONGITUDE'][/types]/" target="_blank">
          <button type="button" class="btn btn-primary">Get Directions</button>
        </a> 

      [/wpv-map-marker]

Everything works except for this. The link does not change. The markers are in different locations, but the links are all for the last (edit: it may be the first) entry.

Any thoughts?

Thanks.

[Luo Yang]

Thanks for the details, I can duplicate same problem, the wpv-for-each does not works as expected in the custom repeating field, I am checking it with our dev for it, currently you can setup the marker_id manually, for example, modify the codes you mentioned above as below:

<div class="business-map">
  [wpv-map-render map_id='map-2']
[wpv-map-marker map_id='map-2' marker_id="marker-0" lat='[types field="business-location" format="FIELD_LATITUDE" index=0][/types]' lon='[types field="business-location" format="FIELD_LONGITUDE"  index=0][/types]']
      <a href="<em><u>hidden link</u></em> field='business-location' format='FIELD_LATITUDE, FIELD_LONGITUDE'][/types]/" target="_blank">
        <button type="button" class="btn btn-primary">Get Directions 0</button>
      </a> 
[/wpv-map-marker]

[wpv-map-marker map_id='map-2' marker_id="marker-1" lat='[types field="business-location" format="FIELD_LATITUDE" index=1][/types]' lon='[types field="business-location" format="FIELD_LONGITUDE"  index=1][/types]']
      <a href="<em><u>hidden link</u></em> field='business-location' format='FIELD_LATITUDE, FIELD_LONGITUDE'][/types]/" target="_blank">
        <button type="button" class="btn btn-primary">Get Directions 1</button>
      </a> 
[/wpv-map-marker]


[wpv-map-marker map_id='map-2' marker_id="marker-2" lat='[types field="business-location" format="FIELD_LATITUDE" index=2][/types]' lon='[types field="business-location" format="FIELD_LONGITUDE"  index=2][/types]']
      <a href="<em><u>hidden link</u></em> field='business-location' format='FIELD_LATITUDE, FIELD_LONGITUDE'][/types]/" target="_blank">
        <button type="button" class="btn btn-primary">Get Directions 1</button>
      </a> 
[/wpv-map-marker]
</div>

Above codes will be able to display 3 markers at once, if you need display more markers, just increase "index" attribute and the marker_id number.

[MichaelR9215]

Luo,

In order for the above to be dynamic for as many or as little markers as a person may put in, can you code in more markers than you need, just in case? Or do you need to know how many markers you're going to have?

Thanks!

[Luo Yang]

The Toolset maps shortcode [wpv-map-marker] can use multiple instance address field directly, in your case, please try this:
1) Create a shortcode for render the HTML a tag and the button, add below codes into your theme/functions.php:

add_shortcode( 'marker_content', 'marker_content_func' );
function marker_content_func($atts) {
	static $counter = 0;
	$address = types_render_field('business-location', array(
		'format' => 'FIELD_LATITUDE, FIELD_LONGITUDE',
		'index' => $counter,
	));
	$res = '<a href="<em><u>hidden link</u></em>' . $address . '" target="_blank"><button type="button" class="btn btn-primary">Get Directions</button></a>';
	$counter ++;
	return $res;
}

2) do not use wpv-for-each shortcode, use marker shortcode directly, for example:

<div class="business-map">
  [wpv-map-render map_id='map-2']
[wpv-map-marker map_id='map-2' marker_id='marker' marker_field='wpcf-business-location']
    [marker_content]
[/wpv-map-marker]
</div>

[MichaelR9215]

I'll try this out, thank you.

[Luo Yang]

OK, please update this thread if you need more assistance for it.