FusionMaps v3 GUI

Here, you can define the various configurations for the map. Please select the appropriate values here and then switch to other tabs to fill in data.

Changes would NOT be automatically reflected on the map. To view the changes, click the "Preview" tab.

Please note that this GUI just covers only the basic properties of FusionMaps. Using the XML data source, you can configure a LOT more properties and features like advanced font handling, custom shapes & images for markers, gradient fills, custom animations, custom effects etc.

Animate Map?
Drop Shadow?
Use Bevel Effect?
Use Hover Effect?
Show Legend?
Show Labels?
Show Marker Labels?
Include Name in Labels?
Include Value in Labels?

Default Fill Color:
Entities Border Color:
Connector Line Color:
Hover Effect Color:
Canvas Border Color:
Font Face:
Font Size:
Font Color:
Legend Position:

Show Entity Tool Tip?
Short Name in Tool Tip?
Show Marker Tool Tip?
Marker Border Color:
Marker Background:
Marker Radius:
Format Number Scale?
Number Prefix:
Number Suffix:

Here, you can define the data that you want to show on the map. Each map is divided into entities like countries, counties, regions etc. You can provide a numerical data value for each entity. Also, along with the data, you can provide the following additional information for each entity:

A text display value (optional), which gets displayed as the label for the entity, instead of the normal label,value.
A hex color code (optional), if you want to color the specific entity differently
Tool-text (optional), if you want to show additional information as tool tip when your users roll over the entity

Please fill in data for the map below.

Using the Marker feature of FusionMaps, you can easily create user-defined points on the map. It can be effectively used to pin-point locations like cities, junctions, houses, malls, shops, offices etc. You can define any number of markers for each map and then opt to show just a few out of them.

To create a marker on the map, follow the steps below:

Click on the specific point on the map (above) where you want the marker to be present. You can only click within the RED rectangle above. If you've pop-up blockers installed, you would need to disable them or Ctrl+Click on the map.
In the pop-up window, enter the following marker properties:
- Unique Id - Each marker needs to have a unique ID (alpha numeric), by which it will be identified on the map.
- Display Label - This label would show up beside the respective marker.
- Label Position - Where the label should appear with respect to marker?
- Show Marker on Map - Where to show this marker on the map by default? FusionMaps allows you define any number of marker points and then show just a few out of them.
Review the Markers in the table below (visible once you start defining Markers).
Click the Preview Tab to see the defined markers on the map.

*Using this GUI, you can select only the default shapes for each marker. If you wish to define custom shapes or use external image icons for markers, you'll need to do the same in XML data source.

Given below is the XML data generated for this map, in various modes. If you want to make any changes to the XML source, you can do so in the first text-area below and then test it against the map.

To embed the above map in your web pages, you can use the HTML code below. Please make sure to:

Save the XML Data and update its path/name in the code below.
Copy PowerMap.js file at the relevant location and update its path/name in the code below.
Update the width and height of the map (as per your requirements) in the code below.
If you're placing more than one map on the same page, make sure to change the DIV Ids, map IDs and reference variables.

The map has been updated with the new configuration / data / markers. Please see the map above.

To copy the XML or HTML code generated for this map, please switch to the appropriate tab.

If you're unable to see the map above, please check for the following:

Make sure that your browser is JavaScript enabled.
Make sure that you have Flash Player 8 (or above) installed for this browser.
Make sure that Flash Player settings is configured to enable JavaScript interaction. To configure the Flash Player Settings, you need to go to the Settings Manager at Adobe's website. There, add this folder (from which you're running this file) as a secure location (Always Allow).