<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>ViaMichelin Maps & Drive API :: VMMap</title>
<link href="http://dev.viamichelin.com/wswebsite/gbr/htm/api/help/css/ViaMichelinAPIHelp.css" rel="stylesheet">
<script type="text/javascript" src="http://api.viamichelin.com/apijs/js/api.js"></script>
<script src="http://dev.viamichelin.com/wswebsite/gbr/htm/api/help/js/getdescription.js"></script>
<script>
function Toload()
{
VMAPI.registerKey(document.getElementById("yourapikey").value);
VMAPI.setLanguage("fra");
}
function functiondrawingmap()
{
document.getElementById("yourmapdiv").innerHTML = "";
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
//map.addEventHandler("onClick",functioneventonclick);
}
function functionzoomingin()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.mapZoomIn();
}
function functionzoomingout()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.mapZoomOut();
}
function functionmapinit()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.mapInitPosition();
}
function functionsetmodenav(i)
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.setMapModeNav(i)
}
function functionsetBubbleTemplate(html)
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
if(!html) html =
'<div style="padding: 5px 10px; background: #EEE">' +
'<p align="right" id="VMBubbleClose" style="padding: 0; margin: 0;"><small>Fermer</small></p>' +
'<div id="VMBubbleContent" style="background: #DDD; white-space: nowrap; padding: 20px;"></div>' +
'</div>';
else html = document.getElementById('setBubbleTemplateValue').value;
map.setBubbleTemplate(html, 0, 0) ?
alert('Template validé, cliquez sur le calque jaune'):
alert('Template invalide!');
mylayer = new VMLayer(new VMLonLat(2.334109831366178,48.86142864093333), "<div style='background: #FF0; border: 1px solid #880; padding: 5px 10px;'>Click me</div>", -15, -5);
mylayer.setExpandLayer("<div>Hello world!</div>");
map.addLayer(mylayer);
}
function functionsetBubbleTemplateTest() {
var val = document.getElementById('setBubbleTemplateValue').value;
val ?
functionsetBubbleTemplate(val):
alert('Veuillez renseigner un template');
}
function functionaddoverlay()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
//create array of geographic coordinates
array_of_points = new Array();
array_of_points.push(new VMLonLat(2.334109831366178,48.86142864093333));
array_of_points.push(new VMLonLat(2.32113557856114,48.86546803014833));
yourline = new VMPolyLine(array_of_points,"#00FFFF",10,0.5);
map.addLayer(yourline);
}
function functiondrawMapFromLayers()
{
if (typeof(map)=="undefined")
{
functionaddoverlay()
}
map.drawMapFromLayers()
}
function functionremoveLayer()
{
map.removeLayer(yourline);
}
function functionremoveAllLayers()
{
map.removeAllLayers();
}
function functionconvertpixel()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
alert(map.convertPixelToGeo(new VMPoint(100,100)));
alert("longitude : "+map.convertPixelToGeo(new VMPoint(100,100)).lon);
alert("latitude : "+map.convertPixelToGeo(new VMPoint(100,100)).lat);
}
function functionconvertgeo()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
alert(map.convertGeoToPixel(new VMLonLat(2.334109831366178,48.86142864093333)));
alert("x : "+map.convertGeoToPixel(new VMLonLat(2.334109831366178,48.86142864093333)).x+"px");
alert("y : "+map.convertGeoToPixel(new VMLonLat(2.334109831366178,48.86142864093333)).y+"px");
}
function functionconvertpixeltometer()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
alert(map.convertPixelToMeter(200)+" meters");
}
function functiongetmapid()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
alert(map.getMapId());
}
function functiondrawmapid()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.drawViaMapId("-t2sn6a0fyi30bp");
}
function functionpanto()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.panTo(new VMLonLat(2.32113557856114,48.86546803014833));
}
function functionmapscale()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.changeMapScale(document.getElementById("scale_level").value);
}
function functiongetmapscale()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
alert(map.getMapScale());
}
function functiongetcenter()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
alert(map.getCenter());
alert("longitude : "+map.getCenter().lon);
alert("latitude : "+map.getCenter().lat);
}
function functionshowmaptools()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.showMapTools(document.getElementById("maptools_level").value);
}
function functionhidemaptools()
{
if (typeof(map)=="undefined")
{
functionshowmaptools
}
map.hideMapTools();
}
function functionresizeto()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.resizeTo(600,400);
}
function functionshowinfopoi()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.showInfoPoi(0);
}
function functionhideinfopoi()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.hideInfoPoi(0);
}
function functiongetnorthwest()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
alert(map.getNorthWest());
alert("longitude : "+map.getNorthWest().lon);
alert("latitude : "+map.getNorthWest().lat);
}
function functiongetnortheast()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
alert(map.getNorthEast());
alert("longitude : "+map.getNorthEast().lon);
alert("latitude : "+map.getNorthEast().lat);
}
function functiongetsouthwest()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
alert(map.getSouthWest());
alert("longitude : "+map.getSouthWest().lon);
alert("latitude : "+map.getSouthWest().lat);
}
function functiongetsoutheast()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
alert(map.getSouthEast());
alert("longitude : "+map.getSouthEast().lon);
alert("latitude : "+map.getSouthEast().lat);
}
function moveNorth()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.moveNorth();
}
function moveSouth()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.moveSouth();
}
function moveEast()
{
if (typeof(map)=="undefined")
{
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
}
map.moveEast();
}
function moveWest()
{
map.moveWest();
}
function functioneventonload()
{
document.getElementById("yourmapdiv").innerHTML = "";
document.getElementById("yourmessage").innerHTML = "";
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onCallBack",function (){
alert('Map loaded');
}
);
}
function functioneventonclick()
{
document.getElementById("yourmapdiv").innerHTML = "";
document.getElementById("yourmessage").innerHTML = "";
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onClick",function (){
alert('Map clicked');
}
);
}
function functioneventonzoomin()
{
document.getElementById("yourmapdiv").innerHTML = "";
document.getElementById("yourmessage").innerHTML = "";
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onZoomIn",function (){
alert('Map ZoomIn');
}
);
}
function functioneventonzoomout()
{
document.getElementById("yourmapdiv").innerHTML = "";
document.getElementById("yourmessage").innerHTML = "";
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onZoomOut",function (){
alert('Map ZoomOut');
}
);
}
function functioneventonstartpan()
{
document.getElementById("yourmapdiv").innerHTML = "";
document.getElementById("yourmessage").innerHTML = "";
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onStartPan",function (){
alert('Map Start Pan');
}
);
}
function functioneventonstoppan()
{
document.getElementById("yourmapdiv").innerHTML = "";
document.getElementById("yourmessage").innerHTML = "";
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onStopPan",function (){
alert('Map Stop Pan');
}
);
}
function functioneventonmove()
{
document.getElementById("yourmapdiv").innerHTML = "";
document.getElementById("yourmessage").innerHTML = "";
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onMove",function (){
document.getElementById("yourmessage").innerHTML = "Map Start Move";
}
);
}
function functioneventonstopmove()
{
document.getElementById("yourmapdiv").innerHTML = "";
document.getElementById("yourmessage").innerHTML = "";
map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onStopMove",function (){
document.getElementById("yourmessage").innerHTML = "Map Stop Move";
}
);
}
</script>
<style>
</style>
</head>
<body onload="Toload();displayDoc('map/VMMap.xml')">
<h1>VMMap</h1>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="content">
<div id="form_apikey">API key : <input type="text" id="yourapikey" value="JSBS20070201173627379646361061" onclick="this.select();"> <input type="submit" name="changeAPIKey" value="Change" onclick="Toload()"></div>
<div class="block_blue" id="list_composant">
<h3>Constructeur (<em>Constructor</em>)</h3>
<ul>
<li><a href="#VMMap">VMMap</a></li>
</ul>
<h3>Methodes (<em>Methods</em>)</h3>
<ul>
<li><a href="#drawMap">drawMap</a></li>
<li><a href="#mapZoomIn">mapZoomIn</a></li>
<li><a href="#mapZoomOut">mapZoomOut</a></li>
<li><a href="#mapInitPosition">mapInitPosition</a></li>
<li><a href="#setMapModeNav">setMapModeNav</a></li>
<li><a href="#setBubbleTemplate">setBubbleTemplate</a></li>
<li><a href="#addLayer">addLayer</a></li>
<li><a href="#drawMapFromLayers">drawMapFromLayers</a></li>
<li><a href="#removeLayer">removeLayer</a></li>
<li><a href="#removeAllLayers">removeAllLayers</a></li>
<li><a href="#convertPixelToGeo">convertPixelToGeo</a></li>
<li><a href="#convertGeoToPixel">convertGeoToPixel</a></li>
<li><a href="#convertPixelToMeter">convertPixelToMeter</a></li>
<li><a href="#getMapId">getMapId</a></li>
<li><a href="#drawViaMapId">drawViaMapId</a></li>
<li><a href="#panTo">panTo</a></li>
<li><a href="#changeMapScale">changeMapScale</a></li>
<li><a href="#getMapScale">getMapScale</a></li>
<li><a href="#getCenter">getCenter</a></li>
<li><a href="#showMapTools">showMapTools</a></li>
<li><a href="#hideMapTools">hideMapTools</a></li>
<li><a href="#showInfoPoi">showInfoPoi</a></li>
<li><a href="#hideInfoPoi">hideInfoPoi</a></li>
<li><a href="#resizeTo">resizeTo</a></li>
<li><a href="#getNorthWest">getNorthWest</a></li>
<li><a href="#getNorthEast">getNorthEast</a></li>
<li><a href="#getSouthWest">getSouthWest</a></li>
<li><a href="#getSouthEast">getSouthEast</a></li>
<li><a href="#moveNorth">moveNorth</a></li>
<li><a href="#moveSouth">moveSouth</a></li>
<li><a href="#moveEast">moveEast</a></li>
<li><a href="#moveWest">moveWest</a></li>
</ul>
<h3>Evénements (<em>Events</em>)</h3>
<ul>
<li><a href="#onCallBack">onCallBack</a></li>
<li><a href="#onClick">onClick</a></li>
<li><a href="#onZoomIn">onZoomIn</a></li>
<li><a href="#onZoomOut">onZoomOut</a></li>
<li><a href="#onStartPan">onStartPan</a></li>
<li><a href="#onStopPan">onStopPan</a></li>
<li><a href="#onMove">onMove</a></li>
<li><a href="#onStopMove">onStopMove</a></li>
</ul>
</div>
<div class="block_blue_bottom"></div>
<h2>Constructeur (<em>Constructor</em>)</h2>
<ul id="exemple_list">
<li><a name="VMMap"></a><a href="javascript:functiondrawingmap()"><strong>VMMap()</strong></a>
<div id="_VMMap" class="desc"></div>
<pre id="VMMap">map = new VMMap(document.getElementById("yourmapdiv"));</pre>
</li>
</ul>
<br>
<br>
<h2>Méthodes (<em>Methods</em>)</h2>
<ul id="exemple_list">
<li><a name="drawMap"></a><a href="javascript:functiondrawingmap()"><strong>drawMap()</strong></a>
<div id="_drawMap" class="desc"></div>
<pre id="drawMap">map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);</pre>
</li>
<li><a name="mapZoomIn"></a><a href="javascript:functionzoomingin()"><strong>mapZoomIn()</strong></a>
<div id="_mapZoomIn" class="desc"></div>
<pre id="mapZoomIn">map.mapZoomIn();</pre>
</li>
<li><a name="mapZoomOut"></a><a href="javascript:functionzoomingout()"><strong>mapZoomOut()</strong></a>
<div id="_mapZoomOut" class="desc"></div>
<pre id="mapZoomOut">map.mapZoomOut();</pre>
</li>
<li><a href="javascript:functionmapinit()"><strong>mapInitPosition()</strong></a>
<div id="_mapInitPosition" class="desc"></div>
<pre id="mapInitPosition">map.mapInitPosition();</pre>
</li>
<li><a href="javascript:functionsetmodenav(0)"><strong>setMapModeNav()</strong> (value 0 : static)</a>
<div id="_setMapModeNav" class="desc"></div>
<pre id="setMapModeNav">map.setMapModeNav(0)</pre>
</li>
<li><a href="javascript:functionsetmodenav(1)"><strong>setMapModeNav()</strong> (value 1 : drag)</a>
<pre id="">map.setMapModeNav(1)</pre>
</li>
<li><a href="javascript:functionsetmodenav(2)"><strong>setMapModeNav()</strong> (value 2 : drag&zoom)</a>
<pre id="">map.setMapModeNav(2)</pre>
</li>
<li><a name="setBubbleTemplate"></a><a href="javascript:functionsetBubbleTemplate()"><strong>setBubbleTemplate()</strong></a>
<div id="_setBubbleTemplate" class="desc"></div>
<br />Votre template :<br /><textarea id="setBubbleTemplateValue" cols="40" rows="4"></textarea><br />
<input type="button" onclick="functionsetBubbleTemplateTest();" value="Tester" />
<pre id="setBubbleTemplate">var html =
'<div style="padding: 5px 10px; background: #EEE">' +
'<p align="right" id="VMBubbleClose" style="padding: 0; margin: 0;"><small>Fermer</small></p>' +
'<div id="VMBubbleContent" style="background: #DDD; white-space: nowrap; padding: 20px;"></div>' +
'</div>';
map.setBubbleTemplate(html);</pre>
</li>
<li><a name="addLayer"></a><a href="javascript:functionaddoverlay()"><strong>addLayer()</strong> (add a line)</a>
<div id="_addLayer" class="desc"></div>
<pre id="addLayer">array_of_points = new Array();
array_of_points.push(new VMLonLat(2.334109831366178,48.86142864093333));
array_of_points.push(new VMLonLat(2.32113557856114,48.86546803014833));
yourline = new VMPolyLine(array_of_points,"#00FFFF",10,0.5);
map.addLayer(yourline);</pre>
</li>
<li><a name="drawMapFromLayers"></a><a href="javascript:functiondrawMapFromLayers()"><strong>drawMapFromLayers()</strong></a>
<div id="_drawMapFromLayers" class="desc"></div>
<pre id="drawMapFromLayers">map.drawMapFromLayers()</pre>
<li><a name="removeLayer"></a><a href="javascript:functionremoveLayer()"><strong>removeLayer()</strong> (remove the line)</a>
<div id="_removeLayer" class="desc"></div>
<pre id="removeLayer">map.removeLayer(yourline);</pre>
</li>
<li><a name="removeAllLayers"></a><a href="javascript:functionremoveAllLayers()"><strong>removeAllLayers()</strong> (remove all overlays)</a>
<div id="_removeAllLayers" class="desc"></div>
<pre id="removeAllLayers">map.removeAllLayers();</pre>
</li>
<li><a name="convertPixelToGeo"></a><a href="javascript:functionconvertpixel()"><strong>convertPixelToGeo()</strong></a> (pixel coordinates x=100, y=100)
<div id="_convertPixelToGeo" class="desc"></div>
<pre id="convertPixelToGeo">map.convertPixelToGeo(new VMPoint(100,100));</pre>
</li>
<li><a name="convertGeoToPixel"></a><a href="javascript:functionconvertgeo()"><strong>convertGeoToPixel()</strong></a> (geo-coordinates 2.334109831366178,48.86142864093333)
<div id="_convertGeoToPixel" class="desc"></div>
<pre id="convertGeoToPixel">map.convertGeoToPixel(new VMLonLat(2.334109831366178,48.86142864093333));</pre>
</li>
<li><a name="convertPixelToMeter"></a><a href="javascript:functionconvertpixeltometer()"><strong>convertPixelToMeter()</strong></a> (200 pixel)
<div id="_convertPixelToMeter" class="desc"></div>
<pre id="convertPixelToMeter">map.convertPixelToMeter(200);</pre>
</li>
<li><a name="getMapId"></a><a href="javascript:functiongetmapid()"><strong>getMapId()</strong></a>
<div id="_getMapId" class="desc"></div>
<pre id="getMapId">map.getMapId();</pre>
</li>
<li><a name="drawViaMapId"></a><a href="javascript:functiondrawmapid()"><strong>drawViaMapId()</strong></a> (mapId : "-t2sn6a0fyi30bp")
<div id="_drawViaMapId" class="desc"></div>
<pre id="drawViaMapId">map.drawViaMapId("-t2sn6a0fyi30bp");</pre>
</li>
<li><a name="panTo"></a><a href="javascript:functionpanto()"><strong>panTo()</strong></a> (to geo-coordinates : 2.32113557856114,48.86546803014833)
<div id="_panTo" class="desc"></div>
<pre id="panTo">map.panTo(new VMLonLat(2.32113557856114,48.86546803014833));</pre>
</li>
<li><a name="changeMapScale"></a><a href="javascript:functionmapscale()"><strong>changeMapScale()</strong></a> scale factor :
<select name="scale_level" id="scale_level">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select>
<div id="_changeMapScale" class="desc"></div>
<pre id="changeMapScale">map.changeMapScale(4);</pre>
</li>
<li><a name="getMapScale"></a><a href="javascript:functiongetmapscale()"><strong>getMapScale()</strong></a>
<div id="_getMapScale" class="desc"></div>
<pre id="getMapScale">map.getMapScale();</pre>
</li>
<li><a name="getCenter"></a><a href="javascript:functiongetcenter()"><strong>getCenter()</strong></a>
<div id="_getCenter" class="desc"></div>
<pre id="getCenter">map.getCenter();</pre>
</li>
<li><a name="showMapTools"></a><a href="javascript:functionshowmaptools()"><strong>showMapTools()</strong></a>
<select name="maptools_level" id="maptools_level">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="_showMapTools" class="desc"></div>
<pre id="showMapTools">map.showMapTools(1);</pre>
</li>
<li><a name="hideMapTools"></a><a href="javascript:functionhidemaptools()"><strong>hideMapTools()</strong></a>
<div id="_hideMapTools" class="desc"></div>
<pre id="hideMapTools">map.hideMapTools();</pre>
</li>
<li><a name="showInfoPoi"></a><a href="javascript:functionshowinfopoi()"><strong>showInfoPoi()</strong></a>
<div id="_showInfoPoi" class="desc"></div>
<pre id="showInfoPoi">map.showInfoPoi(0);</pre>
</li>
<li><a name="hideInfoPoi"></a><a href="javascript:functionhideinfopoi()"><strong>hideInfoPoi()</strong></a>
<div id="_hideInfoPoi" class="desc"></div>
<pre id="hideInfoPoi">map.hideInfoPoi(0);</pre>
</li>
<li><a name="resizeTo"></a><a href="javascript:functionresizeto()"><strong>resizeTo()</strong></a>
<div id="_resizeTo" class="desc"></div>
<pre id="resizeTo">map.resizeTo(500,400);</pre>
</li>
<li><a name="getNorthWest"></a><a href="javascript:functiongetnorthwest()"><strong>getNorthWest()</strong></a>
<div id="_getNorthWest" class="desc"></div>
<pre id="getNorthWest">map.getNorthWest();</pre>
</li>
<li><a name="getNorthEast"></a><a href="javascript:functiongetnortheast()"><strong>getNorthEast()</strong></a>
<div id="_getNorthEast" class="desc"></div>
<pre id="getNorthEast">map.getNorthEast();</pre>
</li>
<li><a name="getSouthWest"></a><a href="javascript:functiongetsouthwest()"><strong>getSouthWest()</strong></a>
<div id="_getSouthWest" class="desc"></div>
<pre id="getSouthWest">map.getSouthWest();</pre>
</li>
<li><a name="getSouthEast"></a><a href="javascript:functiongetsoutheast()"><strong>getSouthEast()</strong></a>
<div id="_getSouthEast" class="desc"></div>
<pre id="getSouthEast">map.getSouthEast();</pre>
</li>
<li><a name="moveNorth"></a><a href="javascript:moveNorth()"><strong>moveNorth()</strong></a>
<div id="_moveNorth" class="desc"></div>
<pre id="moveNorth">map.moveNorth();</pre>
</li>
<li><a name="moveSouth"></a><a href="javascript:moveSouth()"><strong>moveSouth()</strong></a>
<div id="_moveSouth" class="desc"></div>
<pre id="moveSouth">map.moveNorth();</pre>
</li>
<li><a name="moveEast"></a><a href="javascript:moveEast()"><strong>moveEast()</strong></a>
<div id="_moveEast" class="desc"></div>
<pre id="moveEast">map.moveEast();</pre>
</li>
<li><a name="moveWest"></a><a href="javascript:moveWest()"><strong>moveWest()</strong></a>
<div id="_moveWest" class="desc"></div>
<pre id="moveWest">map.moveWest();</pre>
</li>
</ul>
<h2>Evénements (<em>Events</em>)</h2>
<ul id="exemple_list">
<li><a name="onCallBack"></a><a href="javascript:functioneventonload()"><strong>onLoad</strong></a>
<div id="_onCallBack" class="desc"></div>
<pre id="onCallBack">map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onCallBack",function (){
alert('Map loaded');
}
);</pre>
</li>
<li><a name="onClick"></a><a href="javascript:functioneventonclick()"><strong>onClick</strong></a>
<div id="_onClick" class="desc"></div>
<pre id="onClick">map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onClick",function (){
alert('Map clicked');
}
);</pre>
</li>
<li><a name="onZoomIn"></a><a href="javascript:functioneventonzoomin()"><strong>onZoomIn</strong></a>
<div id="_onZoomIn" class="desc"></div>
<pre id="onZoomIn">map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onZoomIn",function (){
alert('Map ZoomIn');
}
);</pre>
</li>
<li><a name="onZoomOut"></a><a href="javascript:functioneventonzoomout()"><strong>onZoomOut</strong></a>
<div id="_onZoomOut" class="desc"></div>
<pre id="onZoomOut">map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onZoomOut",function (){
alert('Map ZoomOut');
}
);</pre>
</li>
<li><a name="onStartPan"></a><a href="javascript:functioneventonstartpan()"><strong>onStartPan</strong></a>
<div id="_onStartPan" class="desc"></div>
<pre id="onStartPan">map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onStartPan",function (){
alert('Map Start Pan');
}
);</pre>
</li>
<li><a name="onStopPan"></a><a href="javascript:functioneventonstoppan()"><strong>onStopPan</strong></a>
<div id="_onStopPan" class="desc"></div>
<pre id="onStopPan">map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onStopPan",function (){
alert('Map Stop Pan');
}
);</pre>
</li>
<li><a name="onMove"></a><a href="javascript:functioneventonmove()"><strong>onMove</strong></a>
<div id="_onMove" class="desc"></div>
<pre id="onMove">map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onMove",function (){
document.getElementById("yourmessage").innerHTML = "Map Start Move";
}
);</pre>
</li>
<li><a name="onStopMove"></a><a href="javascript:functioneventonstopmove()"><strong>onStopMove</strong></a>
<div id="_onStopMove" class="desc"></div>
<pre id="onStopMove">map = new VMMap(document.getElementById("yourmapdiv"));
map.drawMap(new VMLonLat(2.334109831366178,48.86142864093333),15);
map.addEventHandler("onStopMove",function (){
document.getElementById("yourmessage").innerHTML = "Map Stop Move"
}
);</pre>
</li>
</ul>
</div>
</td>
<td valign="top" style="padding-left:10px">
<div id="yourmapdiv"></div>
<div id="yourmessage" style="color: Red; font-weight: bold;"></div>
</td>
</tr>
</table>
</body>
</html>