Navigation
Records in this category
- 04. What are the requirements to install and use USA Zoom Maps?
- 01. How do I install the USA Zoom Map on a webpage?
- 02. How to install USA Zoom Map to my website (detailed description)?
- 03. Can I test the map locally?
- 20. Is it possible to install USA Zoom Map to WordPress (Joomla, Drupal, other CMS) website?
- 10. How to change the background color of the USA Zoom Map?
- 11. How to make the background of the map transparent?
- 12. How to set an image as a background for the map?
- 13. How to change the actual size of the map on a webpage?
- 22. How to change the names the states on the USA Zoom Map?
- 14. How to change the colors of each region on the map?
- 15. How to change the colors of texts on the map?
- 19. Is it possible to place the map multiple times on the same webpage?
- 16. How to display some data in a popup window when a user moves the mouse over a state?
- 17. Is it possible to display a formatted text in a popup window?
- 18. How to change colors of a popup window?
- 05. How to add or edit a pin? (video)
- 06. How to open a URL when a user clicks the pin?
- 09. How to open a URL in a new window?
- 07. How to display a popup window when a user moves the mouse over the pinpoint?
- 08. How to display some data on the page when a user clicks a pin?
- 21. Is it possible to update the map dynamically with a PHP/Perl/ASP script generating an appropriate XML “on the fly”?
Tags
Zoom Maps
02. How to install USA Zoom Map to my website (detailed description)?
1. First of all, you need to extract the contents of the purchased zip file to your local computer using any compressed file extraction application (e.g. WinZip, 7Zip, WinRar, etc.).
Here is how you can do that using WinZip.
a) Run WinZip application.
<img>
b) Click the “Open” button, locate your zip file and open it. You should see the contents of the archive:
<img>
c) Now click the “Extract” button to extract the contents to some folder on your computer. For instance, “My Documents”.
<img>
2. Now you need to upload the map to your website. Navigate to the folder you have specified as the destination on the previous step and find the “locator” folder there. Note: the name of the folder corresponds to the name of the archive and depends on the actual map product. For instance, for USA Zoom Map it is “us-zoom-2.0”.
3. Upload the following files from the folder to the server using your usual FTP client, without changing their file names:
a. locator_map.xml (this is the customized configuration file)
b. locator_map.swf (the engine file for the map)
c. swfobject.js (the SWFObject Java script file, required if you prefer to work with the map via SWFObject)
d. data.swf (contains crucial map data)
4. Finally, you need to build the map into the desired webpage. To do this, you must include the following HTML code to the source code of your webpage. Note, that you can use either SWFObject or non-SWFObject versions. They produce the same result.
SWFObject code:
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var params = {
wmode: "transparent",
menu: "false"
};
var flashvars = {
datafile: "data.swf",
xmlfile1: "locator_map.xml"
};
swfobject.embedSWF("locator_map.swf", "locator_map", "500", "400", "9.0.0", "", flashvars, params);
</script>
<div id="locator_map"> </div>
Non-SWFObject code:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="410" id="locator_map" align="middle"> <param name="movie" value="locator_map.swf" /> <param name="flashvars" value="xmlfile1=locator_map.xml&datafile=data.swf"> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="wmode" value="transparent"> <embed src="locator_map.swf&xmlfile1=locator_map.xml&datafile=data.swf" menu="false" quality="high" wmode="transparent" width="500" height="410" name="locator_map" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
Note: the code above assumes that you uploaded map’s files to the same folder where the HTML page that will display the map is. If the files are stored in some other folder, you need to adjust the paths accordingly. For instance:
SWFObject code:
<script src="/folder/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var params = {
wmode: "transparent",
menu: "false"
};
var flashvars = {
datafile: "/folder/data.swf",
xmlfile1: "/folder/locator_map.xml"
};
swfobject.embedSWF("/folder/locator_map.swf", "locator_map", "500", "400", "9.0.0", "", flashvars, params);
</script>
<div id="locator_map"> </div>
Non-SWFObject code:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="410" id="locator_map" align="middle"> <param name="movie" value="/folder/locator_map.swf" /> <param name="flashvars" value="xmlfile1=/folder/locator_map.xml&datafile=/folder/data.swf"> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="wmode" value="transparent"> <embed src="/folder/locator_map.swf&xmlfile1=/folder/locator_map.xml&datafile=/folder/data.swf" menu="false" quality="high" wmode="transparent" width="500" height="410" name="locator_map" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
Tags: -
Related entries:
- 04. What are the requirements to install and use USA Zoom Maps?
- 01. How do I install the USA Zoom Map on a webpage?
- 20. Is it possible to install USA Zoom Map to WordPress (Joomla, Drupal, other CMS) website?
- 10. How to change the background color of the USA Zoom Map?
- 22. How to change the names the states on the USA Zoom Map?
Last update: 2011-10-21 13:52
Author: Fla-shop Team
Revision: 1.2
You cannot comment on this entry