I’m looking to add an interactive map into my website. I have an editor from code canyon that vectors all the desired animations and tooltips. The problem I’m having is where to place everything in regards to the assets being used in the editor such as images and the map itself. I would assume as long as they are included in the directory then they should be accessible.

Additionally, Im having problems locating where to include the JS files and scripts within the directory and the html file respectively. I have a good understanding of HTML and CSS but JS is not my strong point due to lack of working with it.

Below I’ve included the instructions for launching the plugin

  1. CSS File - included in the <head> tag, like this:

<link rel="stylesheet" href="css/image-map-pro.min.css">

  1. Container Element - place it anywhere in your document, where you wish the image map to appear.

<div id="image-map-pro-container"></div>

  1. jQuery - there are many ways to include jQuery on your page. The easiest would be to copy-paste this line, just before the closing </body> tag of your page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  1. JS File - this is Image Map Pro’s own javascript file. Include it immediately after jQuery: (Unsure of meaning)

<script src="js/image-map-pro.min.js"></script>

  1. Launch Code - the code which actually launches the image map. You have two options:
  • Option 1 - Insert the code at the bottom of the HTML page. Paste the code like this, after the included JS files:
    <script type="text/javascript">
        ;(function ($, window, document, undefined) {
            $(document).ready(function() {
                // Code from the textarea goes here...
        })(jQuery, window, document);