HotSpots Integration

I purchased Community Builder because of the Hotspots integration ability. However, I seem to be having issue making it work. The Hotspot plugins indicate "Hotspots is not compatible with your current CB version." - The Hotspot map is not rendering in a user profile.

This is what the Hotspot developer had to say:
"Most probably the reason the map is not rendering in the user's profile (this map will show hotspots the user has created) is because you are rendering the map in a tab and that tab is not the first one that renders on the page. I don't know if CB has changed anything in their JS, but in the past it was not possible to detect the tab the map is placed in and when it is visible. That's why the map loads on page load. But since the tab is not rendered and it effectively has a 0 height - google maps isn't able to properly initialize. If you want to use that map, move it to a different position and it will be fine.

To place the user's on the hotspots map you'll have to play with the other hotspots settings. And onProfileSave or onProfileUpdate the hotspots code will be triggered - we'll try to get the entered address and geocode it to lat, lng coordinates. If this succeeds. The user will be added to the database."

Thoughts?

We're not the developers of the HotSpot integration you're using so we're limited in what help we can provide. Tabs fire a jQuery event on selection so it is possible to track when a tab is rendered. This is done with the below.


e = original event triggering cbtabs.selected
event = the pass through event triggering cbtabs.selected (use this if detecting click target)
cbtabs = the cbtabs jquery object
tab = tab object selected

tab contains a lot of sub-objects for various parts of a tab. They are as follows and allows acting on various parts of a tab.

tabNav = the navigation container
tabNavLink = the navigation link
tabPane = the tab container
tabIndex = the placement of the tab by index

The issue with the map not showing due to not being able to calculate the height can be avoided by adding a static height to the map container and if needed removed/changed later with JS for responsiveness. Aside from that there's nothing we can really do as we're not the developers of your integration.

What about the "Hotspots is not compatible with your current CB version." issue?

That means the plugin was designed for CB 1.x and never updated to CB 2.x. This check is purely against the XML node <version> of the plugins XML file. It is not recommended to simply change the XML nodes value, but to also be sure the plugin has been updated to use latest CB APIs and is actually compatible. This would be up to the developer of your integration to do.