Why does the text look different when I embed my tour into my web page?
If the text in your hotspot content displays differently for a tour embedded in a web page than a tour viewed in the Tour Preview or standalone, it is likely caused by a conflict with your CSS styles. MapsAlive uses tags such as <font> to format your hotspot titles and descriptions. If you are using styles in the web page with your MapsAlive tour, you may be overriding the tags used by MapsAlive. For example, if you are using a style like this in your web page:
font {
font-size: small;
font-weight: normal;
color: blue;
}
it will override the <font> tags used in the hotspot text and it may appear too large, too small, a different color, etc.
To fix the problem, you will need to identify the CSS styles that are in conflict and either modify them so the hotspot text is the way you want it or define your web page styles using CSS classes or ids. Using classes or ids for your own web page styles will avoid conflicts with the text formatting tags and should not cause a conflict with MapsAlive CSS styles. You can see all the styles for your tour by going to Tour Preview and clicking Code Snippets. Expand the details for option 5 and read the first bullet item in the Important Notes. There is a link that lets you see the styles.
Why do I see funny characters in my text?
This can occur if a) your text includes special Unicode characters (like apostrophes) and 2) you embed your tour inside your web page without using an <iframe> and 3) your web page uses a different character encoding than the one expected by MapsAlive. These special characters can be introduced if you copy/paste text from another web page, for example.
If you are using a character encoding other than UTF-8, these characters may be interpreted incorrectly resulting in strange looking characters instead (usually more than one for each special character).
To fix the problem, you can change the character encoding for your page by including
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
inside the <head> tag for your page. Alternatively, you can edit your text in the Tour Builder and replace the offending characters with characters you can type on your keyboard.
Why doesn't my hotspot content appear when viewing my tour in Firefox?
When viewing a tour using Firefox, sometimes a hotspot's content does not appear when you mouse over its marker. This is a bug in Firefox and/or Flash that occurs when the web page containing the tour is scrolled up or down and seems to only happen when you embed your tour using an iframe. Firefox and/or Flash are not taking the scroll position into account and so the marker location is not updated. Mousing over the marker doesn't work because Flash doesn't think there is a marker there.
If you scroll the page again the problem is usually fixed. Clicking a marker also resets the locations.
If you embed your tour using the direct method the problem does not occur. To do this, click on the screen and copy the embed code in section 5. Another option is to display the tour as far up the page as possible to minimize the possibility of it being scrolled.
Save Failed
A Save Failed message will be displayed if you enter certain character sequences in some MapsAlive text fields. Text that looks like HTML (begins with a '<' character) can cause the problem. The error occurs because of a security mechanism built into this web site to prevent what is known as script injection, a malicious technique that is sometimes used to alter the behavior of someone else's web site.
Note that when this error occurs, none of your changes are saved. If this problem is preventing you from entering text that you need to have, please contact MapsAlive technical support for assistance.
Why doesn't my embedded video display?
When you embed a video by pasting the HTML code into your hotspot's content you should be able to see a preview of the video on the Edit Hotspot Content screen. If you don't see the video on the Edit Hotspot Content screen, in Tour Preview or in the published tour, it may be because:
- you do not have the correct plug-in or media player (Java, Windows Media Player, Quicktime, etc.) for the video format you are trying to view.
- the video may require a later version of Flash or other media player than the one currently installed.
Note: Yahoo Flash videos require Flash 9 or greater. If you do not have Flash 9 installed, you may see a black rectangle in place of the video, and generally there is no message indicating the problem. Before using Yahoo videos you should decide if this is likely to be a problem for visitors to your tour.
If you don't see the video on the Edit Hotspot Content screen in the Tour Builder, it is likely that it will not display outside of MapsAlive either. To determine if this is the case, you should paste the HTML code for the video into a simple .htm file and run this file in a browser. If the video does not run outside of MapsAlive, it will not play in your tour.
Why don't my popups display when I mouse over their markers?
If you are seeing this behavior in an existing tour that used to work properly, the problem may occur if you have installed the latest version of Flash Player.
When Adobe released a security update for Flash Player 9 (version 9,0,124,0) it caused some existing tours to not display content when mousing over their markers. This is only an issue for users who install that version version of flash.
If you have encountered this problem or you just want to ensure your tours function correctly with the Flash update, all you need to do is publish your tour(s) again. To publish a tour, click the Tours tab and click the thumbnail or Edit button for the tour. Click Tour Preview and then click the Publish link.
Why does the quality of my map image degrade sometimes after I upload it?
MapsAlive converts your map image to jpg format when you upload it. If your original map image is a gif file the quality of the resulting jpg may be poorer than the original if you are not using the image at its original size. The combination of the conversion to jpg and the resizing of the image can cause parts of the image to appear fuzzy or colored. This is especially noticeable in parts of the image that contain text.
To solve this problem you can either use the map image at its original size within your tour or you can convert your gif image to a high quality jpg image before you upload it. You can use an image program such as Photoshop to convert the the image.
Pinnable control panel is not attached to fixed popup
Under certain conditions, the control panel that displays the pin icon and close X for a pinnable popup can be detached from the popup when the map first loads (there will be a gap between the bottom of the control panel bar and the top of the popup). This can happen if a DIV tag appears above the tour HTML and if the tag's content is set dynamically after the page loads and if the tag does not have a height attribute.
The problem occurs because MapsAlive calculate the position of the fixed popup before the DIV's content has loaded and during that time the DIV has no height. This throws off the calculation and causes the control panel to appear too high on the page. To remedy the problem, give the DIV tag a height attribute or make sure that its content is set statically.
Popups are displaying too small
If your popups display images from your server that are referenced by URL, or if you are using macros in popups that do not contain an image, the popups may display too small (or too large). This is because MapsAlive detects that there is no image in the
photo area of the popup and uses the value of the Text-Only Width field on the Popup Size and Appearance screen to determine the size of the popup.
If the images you are referencing by URL are all the same size you can
set the Text-Only Width value to the width of the images. If your images
are different sizes you can use the Popup Size Override fields on the
Advanced Hotspot Options screen to set the size for each image.
For popups that use macros in the text area, but do not have an image you can set the Text-Only Width value to the desired popup width.
Marker style with blend mode does not look right in Firefox
A shape marker that uses a marker style with the blend effect set to multiply (the default) can appears too dark and/or have a jagged outline when all of the following conditions are true:
- The map image was uploaded as a swf
- The map background is transparent
- The browser is Firefox
- The Flash Player version is less than 10.1.53
If you experience this problem, you can change the map image to have an opaque background using a program like Adobe Illustrator and then re-upload the swf. Or you can install the latest version of Flash Player.
Polygon shape is not completely filled with marker style color
Sometimes when using a Ready Map or other map that uses polygon shapes, you may notice small gaps near the inside edges of the polygon that are not colored by the marker style fill color. This may be more or less noticeable depending on the size of the map, how much it is scaled, and whether or not Map Zoom is enabled. The phenomenon is most likely to occur if the marker style has a border, especially a thick border.
The gaps appear because of the physics of drawing irregular shapes on the computer screen's regularly spaced grid of pixels. To lessen or eliminate the gaps try the following:
- Use a marker style that has its border thickness set to 0.
- If only a few markers are affected, try nudging them by one or two pixels on the Map screen using the up, down, left, right arrows under the map. If the marker won't nudge, you probably need to uncheck its Is Locked checkbox on the Advanced Hotspot Options screen.
- Try making slight changes to the size of the map.
If none of the above helps, make sure that the coordinates that you imported for the map from HTML are correct. If the map is a Ready Map, please report the problem to support@mapsalive.com.
Marker is invisible or displays as a red rectangle
There is a rare, but known issue where some symbol or text markers appear invisible or appear as a solid red rectangle on the map. The red rectangle is caused by a Flash issue that is fixed in Flash Player
10.1.82.76 and higher, but even with the fix, the marker will still be
invisible.
If the marker is a text marker, you can probably correct the problem by trying one or more of the following:
- Make the text longer.
- Use a larger font size.
- Try a different font family.
- Try using a bold font.
- Try a different combination of text and background colors.
- Add more padding on the text marker.
If the marker is a symbol, try uploading a slightly different version of the image, or the same image in a different file format.
If you cannot correct the problem, please send email to support@mapsalive.com and we'll try to help.
Text not centered in text marker.
The text in a text marker may not appear to be perfectly centered sometimes. This is most noticeable when there is very little text (e.g. just a letter or digit) and when the Auto Size option is checked and there is little or no padding. The problem may also be more pronounced it the text is all upper case.
When MapsAlive measures the text, it allows rooms for ascenders (like on the letter 'h') and descenders (like on the letter 'y'). Text that is all upper case may seem too high because it does not have any descenders yet room is still allowed for them.
The easiest solution is to add some padding so that there is more room around the text so that it appears more centered.
Map takes a long time to load in browser.
Here are some causes and remedies for a map that loads to slowly.
•
The map is a very large, high resolution jpg image
It simply takes longer for the internet to transfer, for example, 3MB of data than 250K. Try experimenting with different jpg compression settings to see if you can reduce the file size without compromising the image quality.
•
The map is a very detailed Scalable Vector Graphic
Flash needs to render every detail on the map and that takes time. See if you can simplify your online version of the map a little by removing unnecessary layers or graphic elements.
•
The map has hundreds of shapes (e.g. a world map with shapes for every country)
The shapes take time to draw, but you can speed things up by using a marker style that has no borders (only a fill color). If the map has a directory, it can take a long time for the browser to render all the directory items. If possible, turn off the directory.
If your map is loading slowly and the cause is not listed above, please send email to support@mapsalive.com and we'll see if we can help you.
Text does not display in popup in IE browser
If your text content does not display, or only some of it displays, when previewing or running your tour in IE, it may be caused by text that is styled to display in italics. This is a known bug where IE is incorrectly sizing the italic text and it throws off the rendering of the text from that point on. It happens if you use the font-style:italic style or if you use html tags such as <em> to make the text italic. Fortunately, the workaround is simple. Add overflow:auto to the style of the italic text element. For example, if you have a style like this:
.sample
{
font-style:italic;
}
add the overflow:auto like this:
.sample
{
font-style:italic;
overflow:auto;
}
This bug seems to occur only when the italic text is inside of another element that is absolute positioned. The problem occurs because popups are absolute positioned.
Sound doesn't play when tour embedded in a web page
If sounds play when you run your tour in Tour Preview, but they don't play when the tour is directly embedded in another web page, you need to see the SoundManager section of the MapsAlive User Guide for the JavaScript API. It explains why this happens and how you can correct it.
Can't mouse onto popup using Safari on the Mac
A recent version of Flash on Safari for the Mac has introduced a bug that can prevent you from mousing onto a popup even though the popup behavior is set to allow the mouse onto the popup. The workaround is to go to the Popup Behavior screen and set an After delay. If you were previously using a Before delay and still need that too, you can go to the Advanced Map Options screen and set a Mouseover Delay.
Note that this problem does not occur with maps that are displayed using HTML5.
IE9 doesn't work quite right with a few MapsAlive features.
We have discovered a few things that IE9 isn't quite handling right:
- The sliders on screens like and don't move when you click/drag them.
- The editor button for the Hyperlink Manager on the screen either doesn't do anything, or a blank window appears.
- Extra blank lines are introduced while editing text on the screen.
To work around these problems, run IE9 in compatibility mode. You do that by clicking the icon that looks like a piece of paper torn in two. The icon appears to the right of the address field at the top of the browser. If the icon is colored blue, compatibility mode is turn on. If the icon is gray, compatibility mode is turned off.
Running in compatibility mode has the side affect of disabling CSS3 support. So if your tour has popups with rounded corners or a drop shadow, those won't appear in Tour Preview, but they will appear when the tour runs by itself in IE9 with compatibility mode turned off.
If you discover any other IE9 problems, we would appreciate hearing from you.
The image loading progress bar doesn't go away on mobile devices.
If your photos don't completely cover the image area of your tour, you might see part of the progress bar animation even after the photo has loaded. This only happens on mobile devices like iPad and iPhone. To work around this, you can use some JavaScript to shift the progress bar to the left. Here's the code:
function maOnMapLoaded()
{
// When the map or gallery loads, display the progress bar 1/4 way across and halfway down.
document.getElementById("maHotspotMediaArea").style.backgroundPosition = "25% 50%";
}
Directory does not scroll on Android browsers, which means entries at the end are not visible.
On some Android browsers the MapsAlive directory does not scroll
which means the entries toward the end of a long directory are not
visible because you can't scroll them into view. You can get around this
by making the entire directory visible so that no scrolling is needed.
You do this with a little bit of JavaScript code that we provide here.
If you have a Pro Plan you can add the code to the JavaScript section on the Tour > Custom HTML screen. If you have a Personal or Plus Plan you can use the same code, but you will have to include it in the web page that contains your interactive map.
First, you need to detect whether your interactive map is running on
an Android browser. Then you can change the behavior of the directory so
that all of the entries are visible.
Here is the code:
function maOnMapLoaded()
{
if (maUaIs("android") || maUaIs("skyfire"))
{
var dir = document.getElementById("maDirContent");
dir.style.maxHeight = "none";
}
}
