Zoom Maps

ID #1071

08. How to display some data on the page when a user clicks a pin?

Sometimes you may want to display some info on the page rather than in the popup window. In the USA Zoom Map you can do this. Here is a step-by-step:

We will use the visual WYSIWYG editor.

1. Open the preview of the map using the locator_start.html file in your purchased zip file. In the preview, scroll down until you see the WYSIWYG map editor.

2. In the editor zoom the state you need and click a city pin. You will see its name in a box at the right side of the editor. Type the following code there:

javascript:displayText('id');

The id here is some name that will identify this particular pinpoint. For instance:

javascript:displayText('Tuscon');

3. In the page where the map is displayed add the following script to the source HTML file after the <HEAD> tag:

<SCRIPT>
function displayText(div_name)
{
document.getElementById('main_text').innerHTML=document.getElementById(div_name).innerHTML;
}
</SCRIPT>

Basically, this script finds the ‘main_text’ DIV block and replaces its contents with contents of the given DIV identified by the div_name variable, in our case it is ‘Tuscon’. Obviously, you should place those DIVs somewhere in the source of the HTML file, for example:

...
<DIV id="main_text">This text will be replaced when you select a pin on the map</DIV>
...
<DIV id="Tuscon" style="DISPLAY: none">
Tuscon dealer
Address: 
Phone:
Fax:
</DIV>

The same way you can assign a text for every pinpoint on the map. Make sure, though, you are using a unique id for each pin and provide a DIV with the text for each pin as well. You need only one main_text DIV, however.

Tags: -

Related entries:

Last update: 2011-06-15 07:19
Author: Fla-shop Team
Revision: 1.1

Digg it! Share on Facebook Print this record Send FAQ to a friend Show this as PDF file
Please rate this FAQ:

Average rating: 0 (0 Votes)

completely useless 1 2 3 4 5 most valuable

You cannot comment on this entry