Embedding Two or More Different Tours¶
You can embed two or more tours that each have different tour numbers into a web page by simply inserting the embed code for each tour at the location within the web page where you want each tour to appear.
Below is an example of two different tours embedded in this user guide page.
Using the API¶
There is one special API consideration when embedding different tours in a web page, and that's the requirement to give each tour a unique identifier as explained in the previous section.
Each tour that is embedded in a web page has its own API object. JavaScript you write to communicate with the API must specify which API object gets called, and which tour the API object calls back to. It’s like this because all of your JavaScript for all of your tours resides in the same JavaScript namespace within the web page. As such, you must code your JavaScript in a way that disambiguates calls and callbacks so that each tour instance calls to its API object and each API object makes callbacks to its tour instance.
API calls
MapsAlive.getApi().changeMarkerShapeAppearance(...);
MapsAlive.getApi("region").changeMarkerShapeAppearance(...);
You disambiguate which tour an API object calls back to by incorporating the tour identifier into the callback function name as shown below. This naming convention ensures that an API object calls back to its own tour.
If the callback function name did not include the tour identifier, and therefore all tours used the same callback function names, then the JavaScript namespace for the web page would contain multiple functions with the same name. As a result, a callback from an API object intended for one tour might be handled by another tour's function based on the JavaScript rules for which function gets called when there are duplicate names.
Callback functions
onEventHotspotChanged(event) { ... }
onEventHotspotChanged(event) { ... }