Skip Navigation

[Résolu] Clickable list of locations below map

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.

This topic contains 24 réponses, has 2 voix.

Last updated by Christian Cox Il y a 4 années et 8 mois.

Assigned support staff: Christian Cox.

Auteur
Publications
#484647

I am trying to create a clickable list of locations below my map. I would like it so that the links scroll the Map to the correct location and open the marker info pop-up.

Is this possible?

The Map can be seen at – hidden link

My current code is shown below:-

[wpv-layout-start]
	[wpv-items-found]
		[wpv-map-render map_id='map-2' map_height='600px' scrollwheel='off' double_click_zoom='off' marker_icon='<em><u>hidden link</u></em>' background_color='#dedee0']
	<!-- wpv-loop-start -->
	<wpv-loop>
		[wpv-map-marker map_id='map-2' marker_id='marker-[wpv-post-id]' marker_title='[wpv-post-title]' marker_field='wpcf-location' id='$town']<h4>[wpv-post-title]</h4><div><p>[types field='development-info'][/types]</p></div>[/wpv-map-marker]
       <div><a href="#[wpv-post-id]">[wpv-post-title]</a></div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No new developments found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]
#484855

Hi Craig,

Sure, this is possible. We have a couple of documents showing how this is done:

https://toolset.com/documentation/user-guides/display-on-google-maps/
https://toolset.com/version/maps-1-1/

You can safely remove the "id" attribute from your marker, you shouldn't need it unless you have other custom JavaScript that uses it. You'll need to replace your links. If you click the Fields and Views button, there's a "Focus on map marker" field next to the map marker.

It will insert a link like this:

<a href="#" class="js-wpv-addon-maps-focus-map" data-map="map-2" data-marker="marker-[wpv-post-id]">[wpv-post-title]</a>

Let me know if I can help guide you further on this.

#484952
Map grey background.png

Hi Christian,

That is brilliant, thank you. I completely missed the "Focus on map marker" item.

I have updated my code as below (I also changed the ID of the map to just "2" instead of "map-2")…

<a href="#" class="js-wpv-addon-maps-focus-map js-toolset-maps-open-infowindow-map-2-marker-[wpv-post-id]" data-map="2" data-marker="marker-[wpv-post-id]">[wpv-post-title]</a>

…which does focus the map on the correct marker, but the marker infowindow doesn't open. Am I doing something wrong with the code? On inspecting the HTML, it appears to be outputting the correct marker ID.

Another issue I notice, is that when jumping to different markers, I occasionally get a grey background where the map is not re-drawing (see attached screen grab). Any idea why this is happening?

Kind regards,
Craig

#485056
Screen Shot 2017-02-02 at 9.27.38 AM.png
Screen Shot 2017-02-02 at 9.30.36 AM.png

OK great. Your code looks good, and if the map is refocusing I think you have the functionality set up correctly. If I hover over your map marker, I don't see a title appear either, so I would guess that there was no popup title or content entered when you created the marker field. It's easy to miss because you have to change screens on the marker dialog to see the inputs. I'm attaching a pic of that here. Unfortunately you may have to delete and recreate your markers in the Loop, since there is not a good way to edit a marker once it has been added.

I see the gray issue you have mentioned when I pan and zoom. If I open the browser console, I see an error from Google Maps. I have attached another screenshot of that here.

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

Typically this occurs when a theme or plugin loads the Google Maps API in a way that conflicts with Toolset's method. You can try the following:

1. Temporarily switch to a default theme like Twenty Seventeen. Do maps work correctly now? If so, we know the conflict is in your theme. In your Theme Options, look for Google Maps API Key settings. If you find any, remove your key and / or disable enqueuing the Maps API script. If not, we may need to contact your Theme author to see if we can work out a solution together.

2. If maps do not work correctly when you switch to a default theme, then the conflict must be in one of your other plugins.Temporarily disable all other 3rd party plugins and confirm maps work as expected. If so, then re-enable them one at a time to determine where the conflict is. Then we can contact the developer of that plugin and try to work out a solution.

3. If temporarily switching themes and disabling all your other 3rd party plugins does not resolve your issue, please let me know and I can dig further to see why you are getting this Maps API error.

#485083

Hi Christian,

Thanks again for this info.

When you say "Unfortunately you may have to delete and recreate your markers in the Loop, since there is not a good way to edit a marker once it has been added.", do you mean that I have to create each individual entry in the post type (New Developments), or just recreate the marker shortcode in the View code?

I changed themes on a development site to Twenty Sixteen and the map redraws fine without ever showing the grey background. I then changed themes to the main theme (not my child theme) and it all worked too. I changed back to my Child Theme and it reverted back to not working.

I then checked my Child Theme's functions.php file and removed some code which was added so that Google Maps generated with Advanced Custom Fields Pro would display

function my_theme_add_scripts() {
	wp_enqueue_script( 'google-map', '<em><u>hidden link</u></em>', array(), '3', true );
	wp_enqueue_script( 'google-map-init', get_stylesheet_directory_uri() . 'https://cdn.toolset.com/google-maps.js', array('google-map', 'jquery'), '0.1', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );

On removing the above code, the Toolset Maps all work fine, but the maps I have inserted on other pages using Advanced Custom Fields Pro no longer display.

So I may have regenerate the maps in these pages using Toolset Maps instead. Unless you can think of a reason why the above code was causing the redraw issues.

#485110

Sorry for the confusion, I mean you need to recreate the marker shortcode in your View's editor. Your individual posts should be fine.

In your Child theme functions file, could you try to comment out the first wp_enqueue_script line like so:

function my_theme_add_scripts() {
    //wp_enqueue_script( 'google-map', '<em><u>hidden link</u></em>', array(), '3', true );
    wp_enqueue_script( 'google-map-init', get_stylesheet_directory_uri() . 'https://cdn.toolset.com/google-maps.js', array('google-map', 'jquery'), '0.1', true );
}

This should prevent loading duplicate APIs, and I think it may maintain the functionality needed for your other maps. Please let me know your results.

#485116

I recreated the shortcode, but still not opening up the relevant pop-up content 🙁

I tried commenting each line individually, but I'm afraid it didn't work. Either the Toolset Maps have the redraw issue, or the ACF Maps do not display at all.

#485157

Sounds like a conflict between ACF and Toolset. I would like to recreate this issue on my local environment so I can pass the information along to our developers. Would you prefer to give me admin access to your site so I can install Duplicator and create a clone, or would you prefer to install and clone yourself? You could then post the files for me on Dropbox or Drive.

https://wordpress.org/plugins/duplicator/

Then I can install locally and test things out without affecting your live site.

#485181

Hi Christian,

I already have an archive created with BackupBuddy and have uploaded it to Droplr – hidden link

I tried Duplicator, but there were issues with the PHP and Server support on the VPS where the site is hosted and I don't have direct access to that at the moment.

Hopefully the BackupBuddy archive should do the trick though.

If you need to use the importbuddy.php script, the password is toolset-support

Cheers,
Craig

#485185

Got it, thanks. You can delete the archive from droplr if you like. Please standby and I'll update you shortly.

#485215

I'm not very familiar with BackupBuddy, but I didn't see an option to create a user after the transfer. I guess I will need to use the login credentials for a user that existed before you made the backup. Can you provide me with the wp-admin URL and login credentials? I'll enable the private reply fields again here.

#485235

I see the marker popup problem. The marker- prefix in the link classname is a bit confusing. Make sure the marker_id attribute in your marker shortcode matches the data-marker attribute in the link.

[wpv-map-marker map_id='2' marker_id='[wpv-post-id]' marker_title='[wpv-post-title]' marker_field='wpcf-location' id='$town']
<div><a href="#" class="js-wpv-addon-maps-focus-map js-toolset-maps-open-infowindow-map-2-marker-[wpv-post-id]" data-map="2" data-marker="[wpv-post-id]">[wpv-post-title]</a></div>

Your location links should work correctly once the marker_id attributes match. I will continue to debug the map refresh issue and get back to you soon. Thanks for your patience.

#485317

Thank you Christian.

I can confirm that the above works perfectly for me.

Hope that there is something obvious/easy to fix re the map refresh issue.

#485654

Hi just wanted to let you know that I'm still working on this today. Between your parent theme, child theme, Google maps API plugin, ACF, and Toolset there are quite a few permutations and variables to consider when isolating the problem. I will do my best to give you a more informative update soon, and I thank you for your patience.

#486260

Hi Christian,

I hope you have had a good weekend!

I just wanted to let you know that I had also been in touch with Advanced Custom Fields support to see if they could shed any light on the issue. Here is their response in the hope that it may help…

----
Hi Craig

Thanks for the email.

To solve this puzzle, we will need to find out which version of the Google maps API (and how it is loaded) is being loaded by the 'Toolset types' plugin.

It is most likely that the version they are loading is not compatible with the ACF JS.
By adding your code, you are ensuring that the v3 library is being included, however, you are missing a client_id which could also explain why you may have issues.
- a client ID is now needed for google API to run 100% correctly
- you can learn more about this here: hidden link

If the 'Toolset types' map fails with your v3 library, this also supports the idea that this plugin is including an outdated or 'older' version of the Google maps library. This is only an assumption, but we will need to learn more about this plugin before finding a solution

Thanks,
Elliot
support@advancedcustomfields.com
----