FLA-SHOP.com - Interactive Maps with Greater Impact!

HTML5 Australia Map Locator 2.4

We introduce a brand new map of Australia powered by JavaScript. This HTML5 interactive map is perfect for any business to visually represent your business geography: display local offices, dealers, reps, warehouses, stores, support centers etc. and to direct customers to an appropriate landing page on your website.

The map is suitable for displaying on any device including iPhone, iPad, Android and obviously on all major desktop browsers. The interactive map shows clickable areas* which you can assign a landing page URL with. Easily adjustable colors, links and popup balloons and other settings allow you to tune the map view to your needs.
* The term "area" means one of the following: region, state, country, province, county or district, depending on the particular map

The HTML5 map is powered by the Raphael JavaScript library providing the work in the following browsers: Chrome, Firefox, Safari, Opera, IE8-IE12, Microsoft Edge.

Table of Contents

Features

  • Best for real-estate, dealer maps, branch offices location and any geographical-related information
  • Responsive/static size of the interactive map
  • Popup windows to display detailed information on mouse over
  • Works with any mobile devices including iPhone and iPad
  • Shows pinpoint markers
  • Simple visual customization of the map look
  • Wide customizing capabilities

Preview

What's new

Version 2.4
Version 2.4 features brand new editors for areas of the map and pinpoints. Now, you configure the map 100% visually and then simply copy the JavaScript code to the settings.js file of the map.

Version 2.3
Fix behavior in Microsoft Edge (rendering bugs). Some minor bugfixes and optimizations.

Settings

To edit map settings, you should use the visual editors included with the map. There are differences for the demo and the full version of the map.

Editing settings in the demo
Unpack the map package and simply run the editors. When you're done with the settings, click the "Export config" button and copy the auto-generated JavaScript code to the clipboard. Then, open the settings.js file from the package and replace its contents with the new config by pasting it from the clipboard.

Open States Editor
Open Point Editor


Editing settings in the full version
To edit settings in the full version of the map, you need to upload the licensed map package to your website first. Then, open the editors in your browser. For example, if you uploaded the package to

%website_root%/html5map/

the URL to open the pinpoint editor then would be:
http://www.websitedomain.com/html5map/points_editor.html

And the URL to open the region editor would be:
http://www.websitedomain.com/html5map/state_editor.html

After you set the preferences of the map, click the "Export config" button and copy the auto-generated JavaScript file to the clipboard. Then, edit the settings.js file on your website and replace its contents with the new config by pasting it from the clipboard. Don't forget to upload settings.js back to your site.

You can also edit the settings.js file manually using any third-party text editor. We advise you to use free Notepad++. Certainly, you can use any other HTML and plaintext editors as well.

The complete list of available interactive map parameters is available here: http://docs.html5maps.com/html5-locator-maps/customization

Install HTML5 Map

In order to install the map on your site, add the following code to the HTML source of the page: 
<!-- start Fla-shop.com HTML5 Map -->
	<div id='map-container'></div>
	<link href="map.css" rel="stylesheet">
	<script src="raphael.min.js"></script>
	<script src="settings.js"></script>
	<script src="map.js"></script>
	<script>
	var map = new FlaMap(map_cfg);
	map.drawOnDomReady('map-container');
	</script>
<!-- end HTML5 Map -->
Note that you should upload all files to your server first.
Make sure you have specified the full path to the files in the code including subfolders. 
<!-- start Fla-shop.com HTML5 Map -->
	<div id='map-container'></div>
	<link href="/directory/map.css" rel="stylesheet">
	<script src="/directory/raphael.min.js"></script>
	<script src="/directory/settings.js"></script>
	<script src="/directory/map.js"></script>
	<script>
	var map = new FlaMap(map_cfg);
	map.drawOnDomReady('map-container');
	</script>
<!-- end HTML5 Map -->

API specification

Version 2.0+ use new API with improved functions, you can find API description by following this link

Fla-shop.com Licensing Information

SINGLE SITE LICENSE
$49
BUY NOW!
Thank you for using our product. Please feel free to contact us with any questions regarding our product.

More maps and Information on website Fla-shop.com