Plugin Conflict with Soliliquy

[myinternetscoutMember]

Hi Support,

Hopefully, you can help me out here. My goal is to place a handful of Google maps in a Soliloquy slider. When I attempted to place two maps in a slider (across two different slides), maps beyond the first slide didn’t load correctly.

I contact Soliloquy support and they looked at it. Their response was that the WP Maps callback wasn’t working properly. See the support response below from Soliloquy.

Soliloquy is one of the most popular WordPress slider plugins. I’m thinking Google Maps should work with it. Can you help resolve this?

Best regards, Peter

Below is the Soliloquy response my support ticket…

Hi Peter, how are you today? 🙂

I actually think this is a plugin conflict. I’ve never used that plugin before, but I use one from Pippin https://wordpress.org/plugins/simple-google-maps-short-code/#installation and it seems to do the trick for me? http://mythemepreviews.com/soliloquy/maps/

When you right-click inspect (in Chrome) on the 2nd slide and the console window opens, you do actually get to see the 2nd slide so I feel this is a callback function of the script used to populate the slider.

Before:
http://cloud.supportally.com/3q07132a2j0i

After:
http://cloud.supportally.com/1j2I280h0Z0Z

It’s like the map doesn’t try to recall the script on navigation to when you go from slide one to slide 2: https://staging.innovateschools.org/dev-test-page/

Unfortunately I would need to refer you back to the plugin author for assistance Peter since it looks like a conflict or a callback conflict (more specifically).

[PerryModerator]

Hi Peter,

Thank you for getting in contact with us!

I believe this issue is caused by Google Maps being initialized off-screen. When this happens you need to trigger a resize event through the Google Maps API to have it display.

Would it be possible for me to see the page in question and I can give you some custom JS to trigger this event when necessary.

Kind regards
– Perry

[myinternetscoutMember]

This reply has been marked as private.

[PerryModerator]

Hi there Peter,

If you don’t have any means to insert custom Javascript on the website as it is, please download a custom JS plugin (there are a lot of good free ones online)

Please add this code to your custom JS

setInterval(function() {
if(!window.MYMAP)
return;

for(var map_id in MYMAP)
google.maps.event.trigger(MYMAP[map_id].map, “resize”)
}, 500);

I’ve tested that on your site and it works in my development environment,

Please let me know if that works for you?

Kind regards
– Perry

[myinternetscoutMember]

hi Perry,

Thank you for your response. Not being all that up on JS, I installed ‘Simple Custom CSS and JS’ plugin. I’ve added your JS code to the header and I’m not seeing any improvement on how the slider behaves.

Any advice you can provide would be helpful.

Thanks,

Peter

[PerryModerator]

Hi Peter,

Sorry for the delay in replying, I was on holiday yesterday!

If you’re not comfortable debugging this yourself, would it be possible for you to give me back-end access to your site temporarily so I can integrate this code for you?

Kind regards
– Perry

[myinternetscoutMember]

This reply has been marked as private.

[PerryModerator]

Hi Peter,

I see that you’ve given that account the “TempAdmin” role, unfortunately the site won’t allow me to access “Simple Custom JS & CSS” with this role, I’ll either need you to give me full access or I can talk you through debugging the Javascript if you don’t mind a bit of back and forth between us.

Kind regards
– Perry

[myinternetscoutMember]

Hi Perry,

Please try again. I provided you full access. Please let me know if you run into any issues.

Thanks,

Peter

[PerryModerator]

Hi Peter,

I’ve tweaked that code a little bit, can you please have a look at the page and let me know if that’s satisfactory?

Kind regards
– Perry

[myinternetscoutMember]

Hi Perry,

It looks like your code is doing unwanted to the tabbed maps below the slider. Nothing has changed with the maps in the Soliloquy slider above that I’m trying to get working – the issue persists in the slider.

Please correct the code so it doesn’t affect the maps in the tabs. Thanks, Peter

Attachments:

You must be logged in to view attached files.

[myinternetscoutMember]

Hi Perry,

Please remove the javascript you added. I believe it’s affecting the maps in the tabs. The maps just keep reloading when a marker is clicked. I’m unsure how to remove that script. We don’t want to the maps to continuously reload. Visitors need to be able to click on a marker and see the info pop window.

Thanks, Peter

[PerryModerator]

Hi Peter,

I’m terribly sorry, I didn’t check the maps in the tabs.

I see you managed to remove the Javascript yourself, I’ve added different code back in that will only fire the resize/refresh event on a specific map after the slide changes, however I see that the second slide is not working because you have map ID 9 in both slides, I’m afraid the plugin can only initialise the first.

Could you possibly remedy this, and let me know the ID of the second map that will appear after the slide changes? Alternatively, you can do the same, and then go to the Custom JS plugin, view my code, and change any number 9s to the ID of the second map,

Please let me know how you get on with this?

Kind regards
– Perry

[myinternetscoutMember]

HI Perry,

The code looks to be working in the slider; however we’re not quite there yet.

First, the second map on the slider (map 10) is way off center. Half of the map is out of view, to the left. Is there a way to ensure the map is properly centered?

Second. right now there are two slides on the slider. I’d like add more maps to the slider; up to 5 or 6 slides with different maps. How should the code be adjusted for additional map slides? Should I just duplicate and repeat the code?

Thanks, Peter

[PerryModerator]

Hi Peter,

What I’ll do is add some code to re-center it when the slide changes, obviously that means that it will snap back every time a slide changes, would that be acceptable?

Regarding the other slides, yes please just copy the code for the relevant IDs. If you think that might become unmanageable I can look at automating it?

Kind regards
– Perry

[Author]

Posts