How to Install HTML5 Maps on a Website. A quick guide.

All of our interactive map products are divided into two main categories. These are plugins for WordPress and JavaScript/CSS maps for any other website.

Installing the map plugin for WordPress

If your site uses WordPress, the installation steps are very simple, similar to any other downloadable WP plugins.

• Go to your WordPress dashboard;
• Select the “Plugins” tab, then select “Add new” link;
• In the appeared window click on “Upload Plugin” button;
• Click “Browse” button and select ZIP archive with the plugin. Click “Install Now” button;
• When the plugin has been installed, activate it by clicking the “Activate Plugin” link;
• Done! Now you can see a new section in WordPress dashboard, where you can manage all map plugin settings.

Even more detailed instructions with screenshots are available in the article "How to install the WordPress map plugin".

Installing the map on a plain HTML/PHP website

Installing the map requires two simple steps

• Upload files to the server
• Insert HTML code in the page

In this example, we use the demo version of clickable JavaScript US map.

To proceed, you need to be able to upload files to the server, for example, via FTP. Also, you need to be able to insert the code to the page. Simply include the necessary scripts and styles in your code, and create a new map object as follows:

  <div id='map-container'></div>
  <link href="map.css" rel="stylesheet">
  <script src="raphael.min.js"></script>
  <script src="settings.js"></script>
  <script src="paths.js"></script>
  <script src="map.js"></script>
  <script>
    var map = new FlaMap(map_cfg);
    map.drawOnDomReady('map-container');
  </script>
	

Here, we create an empty DIV container. The map object we create in the last (embedded) script renders the map directly into this DIV by calling drawOnDomReady(). A JavaScript settings object must be passed (in JSON), called settings.js above. It is passed into the draw function through a variable within that file called map_cfg. This object contains the basic map data, such as state names, and their associated codes. The file is included in the download. If you want, you can change these settings to alter the appearance of the map. All available settings can be found here [API reference].

Try to customize US map in the new online editor, it's very easy and doesn't require registration.

Map installation for popular CMS: Drupal, Joomla, Shopify, Squarespace

You can find detailed step-by-step guides in the following articles

• Installing the map on Drupal
• Installing the map on Joomla
• Installing the map on Squarespace
• Installing the map on Shopify