How to Create a Clickable Map Using Your Own Custom Map Image With iMapBuilder

Step-by-Step Guide

1. 1

   Step 1: Download the interactive map building software from its official website and install in your computer.

   You can check the box "Zooming Function" to allow the users to zoom in/out and navigate the maps. , Click 'Update Map Size' when done. ,,,, Copy and paste the embed code into your existing webpage using Dreamweaver/Frontpage or any other HTML editors. ,,(Please do not fill in http:// or ftp:// in the Ftp Host)Default Host Directory is the path to your root directory of your server, you can leave it blank if you don't have this information. (Usually, it will be /public_html, /htdocs, /var/www/html, you may contact with your web hosting to get this information.) ,,,
2. 2

   Step 2: Run the software

3. 3

   Step 3: click the icon "Create" to create a new map.

4. 4

   Step 4: Click 'Import a custom map image' to import image in JPG

5. 5

   Step 5: GIF or PNG format.

6. 6

   Step 6: In the Map Options tab

7. 7

   Step 7: set the map title

8. 8

   Step 8: background color

9. 9

   Step 9: layout and map size.

10. 10

    Step 10: Click 'Custom map options' tab and enter the desirable width/height of the map.

11. 11

    Step 11: Add labels/icons/points/lines/infobox/tooltips by pressing the icons under point

12. 12

    Step 12: text section

13. 13

    Step 13: Click "Preview" in the menu bar to see how it will look in the browser.

14. 14

    Step 14: Select File->Publish and select the folder you would like to publish the map.

15. 15

    Step 15: After publishing the map

16. 16

    Step 16: a "Publishing" pop-up window will be displayed.

17. 17

    Step 17: Save the webpage (e.g myWebPage.html)

18. 18

    Step 18: navigate to the publish folder and copy the "imapbuilder" folder to the same directory as the myWebPage.html

19. 19

    Step 19: Click Ftp Setting to set the ftp information.

20. 20

    Step 20: After you set the ftp information

21. 21

    Step 21: click Upload in the publishing screen.

22. 22

    Step 22: Select Remote Folder if necessary and click Upload to start uploading.

23. 23

    Step 23: After upload finish

24. 24

    Step 24: you can browse the flash map by clicking the url link and you can modify the url link if not appropriate.

Detailed Guide

About the Author