Documentation of
“Interactive Trial Map”


Table of Contents

  1. General overview
  2. Installation in a standard website
  3. Installation in a WordPress website
  4. Map Customization
  5. How to add/remove and modify pins?
  6. How to get the X, Y coordinates?

FAQ

For frequently asked questions or common issues and possible solutions, please check this updated page.


General overview - top

This is an interactive generic map template of nowhere that you can use for testing. The map consists of HTML, CSS, JS files. You can customize the map colors, links, hover information etc through simple JavaScript files (JavaScript knowledge is not required). Also you can add unlimited number of clickable pins anywhere on the map using X, Y coordinates, then embed the customized map in your website pages.


Installation in a standard website - top

  1. Upload the folder 'try-js-map' to any directory in your website.
    You can use FileZilla as FTP client to upload files to your website, and here is a video tutorial about that.
  2. Test the map by opening the full path of the 'index.html' file in a web browser (such as Google Chrome), the full path should be something like this:
    http://www.yoursite.com/try-js-map/index.html
    If you don't see the map or redirected to '404 Page not found', make sure you are using the correct path of the uploaded folder.
  3. Copy the following code and paste it before </head> tag in your website page, and make sure to change 'yoursite.com' to the correct full path of the files.
    <link rel="stylesheet" type="text/css" href="http://www.yoursite.com/try-js-map/map-style.css"/>
    <script src="http://www.yoursite.com/try-js-map/jquery.min.js"></script>
    <script src="http://www.yoursite.com/try-js-map/map-config.js"></script>
    <script src="http://www.yoursite.com/try-js-map/map-interact.js"></script>
    <script src="http://www.yoursite.com/try-js-map/pins-config.js"></script>
    
  4. On your computer, open the file 'try-js-map/index.html' using any code editor (such as Sublime or Notepad++).
  5. Copy the code in between <body> and </body>
    from
    <span id="tryjstip"></span>
    <div id="mapwrapper">
      <div id="mapbase">
    
    down to...
        </svg>
      </div>
    </div>
    <div class="clear"></div>
    
  6. Paste the code in your website page and test the map.
Important note: With some templates and due to divs arrangement, the floating hover popup may be pushed away from where it should be, to avoid that we recommend that you cut the span "tryjstip" line of code and paste it just after the opening body tag of the page like this:
<body>
<span id="tryjstip"></span>

Installation in a WordPress website - top

Fortunately, we recently converted this template into an installable WordPress plugin zip file (inside the folder 'For WordPress Only'), so you can install it in your WordPress website as a normal plugin, then customize the map by editing the plugin files from your admin panel:

  1. Login to your WordPress admin page.
  2. Go to 'Plugins' > 'Add New'
  3. Click 'Upload Plugin' then 'Choose File', open the file 'try-js-map.zip' ( included in the folder 'For WordPress Only' ).
  4. Click 'Install Now', then 'Activate Plugin'.
  5. In the left side bar you will see a new menu link for the map, click it to see the map and follow the steps to start the customization.

You can use this shortcode [try_js_map] as many times as you want to display the same map in different pages. If you want to have a different map with new colors and links, you can install a 2nd or 3rd instance of the plugin ( 'try-js-map-ii.zip' and 'try-js-map-iii.zip' included in the downloaded files).


Map Customization? - top

You can customize the colors, link, hover information for each area through the included 'map-config.js' file (JavaScript knowledge is not required). You can open that file using any code editor (such as Sublime or Notepad++).

The colors of the 'borderColor' and the 'visibleNames' can be found at the end of the 'map-config.js' file.


How to add/remove and modify pins? - top

You can customize the existing pins, add or remove pins through the file 'pins-config.js'.


How to get the X, Y coordinates? - top

Click any where on the following map guide to get the X, Y coordinate values and use them in the 'pins-config.js' file:
This interactive guide requires Adobe Flash Player in your browser, however the actual template files does not include Flash and does not require Flash player to work. If this guide doesn't work for you, you can use this map chart image.


Thank you for trying our template. If you have any questions that are beyond the scope of this help file, please feel free to contact us through the contact form here.

Thank you
html5interactiveMaps.com
Support Team