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
01. How do I install the USA Zoom Map on a webpage?
Follow these steps to install the map to your webpage.
1. Extract the contents of the purchased zip file to your local computer using any compressed file extraction application (e.g. WinZip, 7Zip, WinRar, etc.)
2. Upload the following files to the server, 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)
3. Now you need to insert the HTML code to your page where you want your map to be. To do this, paste either the SWFObject code or the Non-SWFObject code to your web page where you wish the map to be rendered.
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>
You can use the locator_start.html as an additional example of how you can build the map into your webspage.
Tags: -
Related entries:
- 04. What are the requirements to install and use USA Zoom Maps?
- 02. How to install USA Zoom Map to my website (detailed description)?
- 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?
- 13. How to change the actual size of the map on a webpage?
Last update: 2011-05-26 09:50
Author: Fla-shop Team
Revision: 1.2
You cannot comment on this entry