How to Embed Your Custom World Map in Joomla

Step-by-Step Guide

1. 1

   Step 1: Go to the registration page of iMapBuilder online mapping tool.

   Click 'Try it free' for testing purpose or 'sign up' button to sign up a plan.
2. 2

   Step 2: Enter your email and password for existing user

   You will then receive an email showing your email address and password to login. ,,, You can also set the colors, add a hyperlink or rename the regions under countries/states section. , A pop up box is now displayed, click 'add new point' or 'add new label'.
   
   Then click on the map where you want to place the placemark.
   
   The placemark is now added. , It is possible to change the placemark icon, add a tooltip for additional information or a hyperlink and redirect users to other page. ,,,,,,,, Click Update. ,, Click on it and you will see the custom world map is now embedded.
3. 3

   Step 3: or enter an email to register a new account.

4. 4

   Step 4: Click 'Create New Interactive map' to create a clickable map.

5. 5

   Step 5: Select map templates or import your own custom map image in GIF

6. 6

   Step 6: JPG or PNG formats.

7. 7

   Step 7: Under map properties section

8. 8

   Step 8: you can set the map title

9. 9

   Step 9: background color

10. 10

    Step 10: tooltip colors

11. 11

    Step 11: Click 'Point and Label' at the top of the map.

12. 12

    Step 12: Click edit to edit the placemark.

13. 13

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

14. 14

    Step 14: Save the map project by clicking 'save' button.

15. 15

    Step 15: Select File->Publish to publish the map

16. 16

    Step 16: copy the embed code.

17. 17

    Step 17: Login your Joomla account

18. 18

    Step 18: click 'Administrator' under Resources section.

19. 19

    Step 19: Click article manager icon.

20. 20

    Step 20: Click new icon to start an article

21. 21

    Step 21: Set the title

22. 22

    Step 22: select the section where you want to post the article

23. 23

    Step 23: click HTML icon.

24. 24

    Step 24: Paste the embed code of custom world map to the HTML source editor.

25. 25

    Step 25: Click apply to apply the settings.

26. 26

    Step 26: Go back to your Joomla first page

27. 27

    Step 27: you will see your article.

Detailed Guide

About the Author