A step by step guide to integrate the HTML5 map into a WordPress site

Note: You may notice a slight difference in the code in the screenshots than your actual code because we update our map code from time to time but the same steps is correctly applied on your purchased map.

The purchased files include "map" and "help" folder, please read the help for more details about customizing the map.

1- Get connected to your FTP server to upload the map files using any FTP client software (such as FileZilla),
For more details about how to use filezilla, please check tutorial here, or watch this video.

2- Upload the "map" folder with all its content to your server, you can upload it to the wp-content as you see in this image:

If you successfly upload it, you should be able to open the map directly in your browser using a link like this:
http://www.yoursite.com/wp-content/map/map.html

3- In the "map" folder you will find "map.html" file, open it using any text editor (such as Sublime)

4- Replace the default path of the JS, CSS files with path of those files on your server, also you can remove the head, body and title tags as seen here:

5- Save the changes, we will need that new code in the HTML Snippet.

6- Login to your WordPress admin panel then download and install the HTML Snippet plugin

7- Create a new snippet as follow:

8- Copy the shortcode and paste it in the page that you want to add the map to.

You can customize the map colors, links, etc at the map-config.js file also you can adjust the map size through the map-style.css file.

If you have any questions, feel free to email me through the contact form here.

That's it

Good luck :)

COPYRIGHT © All rights reserved to HTML5InteractiveMaps.com - Art101