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.
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.
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.
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.
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:
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:
Login to your WordPress admin page.
Go to 'Plugins' > 'Add New'
Click 'Upload Plugin' then 'Choose File', open the file 'try-js-map.zip' ( included in the folder 'For WordPress Only' ).
Click 'Install Now', then 'Activate Plugin'.
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).
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++).
"hover": "write some basic information for the popup",
"url": "http://www.thelink.com/",//link to any webpage
"target": "same_window",
"same_window" to open the link in the same window.
"new_window" to open the link in a new window.
"modal" to open a modal window, in this case you need to change the above "url" to the required modal window name such as "url": "#mymodal" Note: This option works only with Bootstrap website templates and Bootstrap based WordPress themes, if you are not sure or if you don't know how to use it, you need to ask your website template/theme provider.
"none" use it if you have enough information in the popup and you don't want to make the area clickable but the popup still working.
"upColor": "#FFFFF3", "overColor": "#ECFFB3", "downColor": "#cae9af", You can use this color picker to get the color code.
"active": true You can set it to false to make this area inactive (not clickable, no highlight, no popup).
The colors of the 'borderColor' and the 'visibleNames' can be found at the end of the 'map-config.js' file.
You can customize the existing pins, add or remove pins through the file 'pins-config.js'.
"shape": "square", choose either "circle" or "square".
"hover": "write some basic information for the popup",
"pos_X": 20, "pos_Y": 50, use this guide to obtain the correct values.
"size": 18, size of the pin
"outline": "#660000",
"upColor": "#e60000", "overColor": "#ffd480",
"url": "http://www.thelink.com/",//link to any webpage
"target": "same_window",
"same_window" to open the link in the same window.
"new_window" to open the link in a new window.
"modal" to open a modal window, in this case you need to change the above "url" to the required modal window name such as "url": "#mymodal" Note: This option works only with Bootstrap website templates and Bootstrap based WordPress themes, if you are not sure or if you don't know how to use it, you need to ask your website template/theme provider.
"none" use it if you have enough information in the popup and you don't want to make the area clickable but the popup still working.
"active": true You can set it to false to make this area inactive (not clickable, no highlight, no popup).
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.
