地图是一种传达思想和展示综合数据的有用工具。虽然Google提供了真实的地图，但如果不需要真实的地图，或者不想让Google知道在做什么，Mapper脚本就可以派上用场了。
Mapper由三个脚本组成：
mapper.php 显示地图和可链接的符号；
mapper.js 处理点集；
genimg.php 通过GD创建几何符号。
要显示可链接的地图，必须包含mapper.php脚本，并且genimg.php脚本必须位于同一目录下。通过调用函数createMap并传入一个参数数组来创建带有符号的地图，如下所示：
<?php
include 'mapper.php';
$aParams = array(
"image" => "images/PiemontMap.gif",
"points" => array(
"Turin" => array(
"x" => 127,
"Y" => 250),
"Ivrea - Arduino" => array(
"x" => 146,
"Y" => 190),
"Garessio - Sanofi" => array(
"x" => 160,
"Y" => 370)));
echo createMap($aParams);
?>
可以通过设置一些属性来个性化地图，这些属性可以是全局级别的（即对所有点有效），也可以是某些类别的点或单个点的级别。点级别的设置会覆盖类别级别的设置，类别级别的设置会覆盖全局级别的设置，而全局级别的设置最终会覆盖默认设置。
默认符号是一个红色的半透明（alpha = 0.7）圆圈，直径为10像素；可以通过添加参数color、shape、alpha和width来部分或全部更改此设置。在下面的代码中，它们被添加到全局级别，即对所有点有效。
<?php
$aParams = array(
"image" => "images/PiemontMap.gif",
"color" => "008080",
"width" => 14,
"alpha" => 0.9,
"shape" => "diamond",
"points" => array(
"Turin" => array(
"x" => 127,
"Y" => 250),
"Ivrea - Arduino" => array(
"x" => 146,
"Y" => 190),
"Garessio - Sanofi" => array(
"x" => 160,
"Y" => 370)));
echo createMap($aParams);
?>
shape参数可以是一个图像或一个UNICODE值（包含许多符号）。
<?php
$aParams = array(
"image" => "images/PiemontMap.gif",
"Width" => 30,
"alpha" => 1,
"color" => "gray",
"points" => array(
"Turin" => array(
"x" => 127,
"Y" => 250,
"shape" => "images/condor.gif"),
"Ivrea - Arduino" => array(
"x" => 146,
"Y" => 190,
"Shape" => "⌨"),
"Garessio - Sanofi" => array(
"x" => 160,
"Y" => 370,
"Shape" => "⚗")));
echo createMap($aParams);
?>
可以将anchor参数与点关联以创建链接；其值是要链接的网站或文档（不包含href=），并且可以包含其他锚点参数（如target）。
<?php
$aParams = array(
"image" => "images/PiemontMap.gif",
"width" => 50,
"points" => array(
"Turin" => array(
"x" => 127,
"Y" => 250,
"shape" => "images/logopace.gif",
"anchor" => "http://rete.condorinformatique.com/index.php target=_blank"),
"Ivrea - Arduino" => array(
"x" => 146,
"Y" => 190,
"shape" => "images/arduino.jpg"),
"Garessio - Sanofi" => array(
"x" => 160,
"Y" => 370,
"shape" => "images/logo-sanofi.png"))));
echo createMap($aParams);
?>
可以为所有符号或特定点附加事件，event参数接受一个函数名或一个完整的事件，在第一种情况下会生成一个onclick事件。
<?php
$aParams = array(
"image" => "images/world.png",
"width" => 20,
"event" => "alert",
"points" => array(
"Italia" => array(
"x" => 302,
"Y" => 114,
"shape" => "images/it.png",
"event" => "onMouseOver='alert(\"nation=\"+this.title)'"),
"Francia" => array(
"x" => 278,
"Y" => 105,
"shape" => "images/fr.png"),
"Spagna" => array(
"x" => 274,
"Y" => 128,
"shape" => "images/es.png"),
"U.S." => array(
"x" => 93,
"Y" => 118,
"shape" => "images/us.png"))));
echo createMap($aParams);
?>
可以通过在点级别插入不同的形状来获得不同的符号，但最简单的方法是在全局级别分配一个形状集给一个类型，并在点级别插入类型参数。
<?php
$aParams = array(
"image" => "images/world.png",
"Europa" => array(
"color" => "blue",
"alpha" => 0.5,
"shape" => "diamond"),
"Africa" => array(
"alpha" => 1,
"shape" => "images/Elephant.png",
"width" => 24),
"America" => array(
"color" => "yellow",
"shape" => "triangle",
"width" => 15),
"points" => array(
"Italia" => array(
"x" => 302,
"Y" => 114,
"type" => "Europa"),
"Francia" => array(
"x" => 282,
"Y" => 105,
"type" => "europa"),
"Spagna" => array(
"x" => 272,
"Y" => 125,
"type" => "europa"),
"Tanzania" => array(
"x" => 355,
"Y" => 225,
"type" => "Africa"),
"Kenia" => array(
"x" => 360,
"Y" => 200,
"type" => "Africa"),
"Birmania" => array(
"x" => 483,
"Y" => 190,
"type" => "Asia"),
"U.S." => array(
"x" => 93,
"Y" => 118,
"type" => "America")));
echo createMap($aParams);
?>
<?php
$aPoints = array(
"Tanzania" => array(
"x" => 355,
"Y" => 225),
"Kenia" => array(
"x" => 360,
"Y" => 200),
"Birmania" => array(
"x" => 483,
"Y" => 190));
$aParams = array(
"image" => "images/world.png",
"points" => $aPoints);
echo createMap($aParams, true);
echo "<input type=button onclick='alert(savePoints(mapper.returnPoints()))' value='Save'>";
?>
{source}
<?php
include 'mapper/mapper.php';
JHTML::script(
"mapper.js",
"mapper/js/",
false
);
// 包含javascript mapper函数
$aParams = array(
"image" => "mapper/images/world.png",
"alpha" => 1,
"points" => array(
"Kenia" => array(
"x" => 360,
"Y" => 200),
"Tanzania" => array(
"x" => 355,
"Y" => 225),
"Birmania" => array(
"x" => 483,
"Y" => 190),
"U.S." => array(
"x" => 93,
"Y" => 118)));
echo createMap($aParams, true);
echo "<input type=button onclick='alert(mapper.returnPoints())' value='Save'>";
?>
{/source}