The MapsAlive gallery feature is a great way to display still photographs, but did you know that you can also use it for video and other multimedia? On my own personal photography site, I use a gallery to display 360° panoramic images (see screenshot below). When you click on a thumbnail in the gallery, its panorama displays so that you can pan and zoom it. You can see how it works here.
Show a Panorama When a Marker is Clicked
When you use still photos in a gallery, the photo changes as soon as you mouse over its marker. That will happen with the panoramas too, but it's probably not the behavior you want since they can take a few seconds to load. So we changed the markers to show their content (the panorama) when clicked instead of when moused over. You do that by going to the Hotspot Actions screen and choosing the Marker is clicked radio button for the Show this hotspot's content when option.
Unfortunately, that causes a small problem. Even though the content does not change when you mouse over a marker, the marker under the mouse appears as selected (in the example above the selected marker has a red border). That means that the panorama being displayed can get out of sync with the marker that is showing as selected. We can fix that with a few lines of JavaScript and by changing the markers to be static.
Static Markers
A static marker does not change its appearance when you move your mouse over it. It does, however, still show its tooltip and it still performs its mouse actions, in this case, the click action. You make a marker static when you want more control over when its appearance changes. For this gallery, we only want a marker to appear as selected after it has been clicked. To make a marker static, just check the Is Static box on the Advanced Hotspot Options screen.
A Little Bit of JavaScript
After we made all the markers static, we went to the Custom HTML screen and typed the function shown below into the JavaScript text box. You can read about the maOnHotspotChanged function in the user guide for the JavaScript API, but briefly, it gets called whenever a new hotspot is selected. So it gets called when you click on a marker, but not when you simply mouse over it.
The code we added to the function only does two things. First, it sets the appearance of all the markers to normal. We do this in order to remove the selected appearance from whichever marker is currently selected. Second, it makes the marker that was just clicked appear as selected. Here's the code:
function maOnHotspotChanged(hotspotId)
{
mapsalive.setMarkerAppearanceNormal("*");
mapsalive.setMarkerAppearanceSelected(hotspotId);
}
In the first statement, the "*" is wildcard notation meaning all markers. You can use it instead of typing a list of every marker's hotspot Id. Note that you need to have a MapsAlive Pro Plan to use the Custom HTML feature, but if you only have a Plus or Personal plan, you can put the JavaScript in the web page that contains the tour itself.
Also Works with Maps
The example discussed here uses a gallery, but everything would work the same way with a map. For example, suppose you wanted to display panoramas showing vistas at various points along a hiking trail. You would use a hiking trail map and your favorite marker symbol (maybe an arrow or some little feet) and have each marker display its panorama when clicked. Or you could have some of the markers display panoramas and some display still photos or videos.
Works on iPad and iPhone
We use a panorama player that works on PCs, Macs, iPad, and iPhone. Since MapsAlive galleries and maps also work on all those devices, you can be sure that everyone will be able to enjoy your tour.
Subscribe