Impect.
Passes moi le code source de ta page (code entre crochets pour la balise ici) et ta méthode sur l'API google et je regarde comment ça fonctionne de prêt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<title>UniTT - Googlemap</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="4x4, forum, annonce, clubs, terrain, association" />
<meta name="Description" content="Forum 4x4, le site consacré a la pratique du 4x4 en France : Annonces
4x4, occasion, club 4x4, essais, forum, cote des 4x4, infos, chat etc..." />
<!-- CSS Stylesheet -->
<link rel="stylesheet" type="text/css" href="clientscript/vbulletin_css/style-2b216e70-00006.css"
id="vbulletin_css" />
<!-- Googlemap CSS Stylesheet -->
<style type="text/css" id="gamerinfo-css">
<!--
.gmballoon
{
background: #ffffff;
color: #000000;
font: 10pt Verdana, Trebuchet MS,Arial, Helvetica, sans-serif;
}
.gmlink {
background: #ffffff;
font-weight : bold;
text-transform : none;
font-size : 10px;
color : #000000;
}
.gmlink a:link, .gmlink a:visited {
font-weight : bold;
text-transform : none;
font-size : 11px;
color : #000000;
}
.gmlink a:hover {
font-size : 11px;
color : #757575;
text-decoration : underline;
font-weight : bold;
}
.gmtext{
background: #ffffff;
font-size:8pt;
width:auto;
color:#000000;
font-family:Verdana, Trebuchet MS,Arial, Helvetica, sans-serif;
word-wrap: break-word;
display:block;
}
-->
</style>
<!-- / CSS Stylesheet -->
<!-- / CSS Stylesheet -->
<script type="text/javascript">
<!--
var SESSIONURL = "";
var IMGDIR_MISC = "images/orange_arroser/misc";
var vb_disable_ajax = parseInt("0", 10);
// -->
</script>
<script type="text/javascript" src="clientscript/vbulletin_global.js?v=364"></script>
<script type="text/javascript" src="clientscript/vbulletin_menu.js?v=364"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA1fxskSWqTMcgXYwfGE6Y dxTnKhWCCPkzvBzmWaIbLTn95p7qDRTt4BLZjtcrxE2X4OhLpa kgN78Kbw" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<!-- logo -->
<a name="top" id="top"></a>
<!-- /logo -->
<!-- content table -->
<!-- open content container -->
<div align="center">
<div class="page" style="width:99%; text-align:left">
<div style="padding:0px 25px 0px 25px">
<script type="text/javascript">
<!--
function log_out()
{
ht = document.getElementsByTagName("html");
ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grays cale=1)";
if (confirm('Etes-vous certain de vouloir vous déconnecter ?'))
{
return true;
}
else
{
ht[0].style.filter = "";
return false;
}
}
//-->
</script>
<!-- Ici Nicolas -->
<!-- Fin de tes modifs -->
<br />
<!-- breadcrumb, login, pm info -->
<!-- / breadcrumb, login, pm info --><br />
<!-- NAVBAR POPUP MENUS -->
<!-- header quick search form -->
<!-- / header quick search form -->
<!-- user cp tools menu -->
<!-- / user cp tools menu -->
<!-- / NAVBAR POPUP MENUS -->
<!-- PAGENAV POPUP -->
<!-- / PAGENAV POPUP -->
<table class="tborder" cellpadding="4" cellspacing="1" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat"><img src="http://as.lacour.free.fr/documents/logo.gif" width="600" height="92" longdesc="http://www.unitt.fr" /></td>
</tr>
</thead>
<tbody>
</tbody>
<thead>
<tr>
<td width="76%" align="center" class="tcat"><h1>Bienvenue sur la cartographie UniTT </h1></td>
</tr>
<tr>
<td align="center" class="tcat"><form id="form1" name="form1" method="post" action="">
Cliquer sur une des Zones :
<input name="Submit" type="button" onclick="SelectZone("Nord")" value="Nord" />
<input name="Submit" type="button" onclick="SelectZone("Est")" value="Est" />
<input name="Submit" type="button" onclick="SelectZone("Ouest")" value="Ouest" />
<input name="Submit" type="button" onclick="SelectZone("Centre")" value="Centre" />
<input name="Submit" type="button" onclick="SelectZone("Sud-Est")" value="Sud-Est" />
<input name="Submit" type="button" onclick="SelectZone("Sud-Ouest")" value="Sud-Ouest" />
<input name="Submit" type="button" onclick="SelectZone("FR")" value="France" />
<input name="Submit" type="button" onclick="SelectZone("Europe")" value="Europe" />
<input name="Submit" type="button" onclick="SetLatLng()" value="Search Name" />
</form> </td>
</tr>
</thead>
<tr>
<td valign="top" class="alt1"><div align="center">
<!-- map -->
<div width="800px">
<fieldset style="width:800px">
<legend>Tableau de bord Googlemap</legend>
<p>Entrées disponibles
<input name="nb" id="nb" type="text" class="nb" value=""
size="4" maxlength="5" readonly="readonly" style="padding-left:5px; font-weight:bold;font-size:8pt;
width:50px;background:#FFF48E;"/>
latitude
<input name="latbox" type="text" id="latbox" size="15" readonly="readonly"
style="padding-left:5px;font-size:8pt; font-weight:bold; width:100px;background:#FFF48E;"/>
longitude
<input name="lngbox" type="text" id="lngbox" size="15" style="padding-left:5px;
font-weight:bold;font-size:8pt; width:100px;background:#FFF48E;" readonly="readonly" />
Niveau de Zoom courant
<input name="zoombox2" type="text" id="zoombox2" size="4" readonly="readonly"
style="padding-left:5px;font-size:8pt; font-weight:bold; width:60px;background:#FFF48E;" />
</p>
<p>Partie de Nom et Double-clic
<input name="nombox" type="text" id="nombox"
style="padding-left:5px;font-size:8pt; font-weight:bold; width:200px;background:#FFF48E;" ondblclick="Look_Marker()"/>
</p>
<p>Adresse
<input name="adressebox" type="text" id="adressebox" style="padding-left:5px; font-weight:bold;font-size:8pt; width:400px;background:#FFF48E;"
size="30"/>
<br />
<img src="http://www.forum4x4.com/forum/images/googlemap/mm_20_green.png" width="12" height="20" title="Clubs" />
Clubs
<img src="http://www.forum4x4.com/forum/images/googlemap/mm_20_yellow.png" width="12" height="20" title="Terrains" />
Terrains
<img src="http://www.forum4x4.com/forum/images/googlemap/mm_20_orange.png" width="12" height="20" title="Délégués UniTT" />
Délégués UniTT
<img src="http://www.forum4x4.com/forum/images/googlemap/mm_20_red.png" width="12" height="20" title="Pros" />
Pros <img src="http://www.forum4x4.com/forum/images/googlemap/online.png" width="12" height="20" title="User online" />
User is online </p>
</fieldset>
</div>
<div id="map" style="width: 800px; height: 400px;"></div>
<script type="text/javascript">
//<![CDATA[
var icon = new GIcon();
icon.image = "http://www.forum4x4.com/forum/images/googlemap/mm_20_red.png";
icon.shadow = "http://www.forum4x4.com/forum/images/googlemap/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GLatLng(20, 6);
icon.infoWindowAnchor = new GLatLng(1,5);
var map;
var dlat = "46.46813299215554";
var dlng = "3.251953125";
var dzoom = "2";
var dtypemap = "c";
//var dmaptype = "";
var markers;
var IdListe = 0;
var timeOut = 30;
var timeOutDoc = 1000;
var undecode = 0;
var address = "";
var Local_lat;
var Local_lng;
var place;
var Zone;
window.onload=Load_Map
function get_icon(type,online) {
var color;
if ((typeof(type)=="undefined") || (type==null))
{
color = "red"
}
else {
color = type
}
var icon = new GIcon();
if (online == "1") {
icon.image = "http://www.forum4x4.com/forum/images/googlemap/mm_20_"+ color +"_online.png";
}
else
{
icon.image = "http://www.forum4x4.com/forum/images/googlemap/mm_20_"+ color +".png";
}
icon.shadow = "http://www.forum4x4.com/forum/images/googlemap/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GLatLng(20, 2);
icon.infoWindowAnchor = new GLatLng(1, 5);
return icon;
}
function switchDisplay(n, force) {
window.focus();
if (document.all) {
detail=eval("document.all."+ n + '');
} else {
detail=document.getElementById(n);
}
if (detail==null) return false;
if (force!=null) {
detail.style.display=force;
} else {
if ((detail.style.display!="block") || (detail.style.display=="")) {
detail.style.display="block";
} else {
detail.style.display="none";
}
}
}
function SelectZone(choix) {
Zone = choix;
IdListe = 0;
undecode = 0;
map.clearOverlays();
window.setTimeout(mapOne,10);
}
function SetLatLng() {
var searched = document.getElementById('nombox').value;
var online = 1;
document.getElementById('nombox2').value=""
// alert(searched);
for (j=0; j < markers.length;j++ ) {
if (markers[j].getAttribute("title") == searched) {
// alert("reached");
if (markers[j].getAttribute("Lat") == "") { geocoder.getLocations(address,function(response) {
if (!response || response.Status.code != 200) {
undecode=undecode+1;
document.getElementById('adressebox').value=addres s;
document.getElementById('nombox').value= markers[j].getAttribute("title");
Local_lat = 0;
Local_lng = 0;
alert("Sorry, we were unable to geocode that address : "+address+" "+response.Status.code);
} else {
// alert("geodecoded");
place = response.Placemark[0];
Local_lat = parseFloat(place.Point.coordinates[1]);
Local_lng = parseFloat(place.Point.coordinates[0]);
}
});
} else {
// alert("Known");
Local_lat = markers[j].getAttribute("Lat");
Local_lng = markers[j].getAttribute("Lng");
}
var type = markers[j].getAttribute("type");
var tel1 = markers[j].getAttribute("telephone_1");
var tel2 = markers[j].getAttribute("telephone_2");
userid = markers[j].getAttribute("Entree");
if ((type=="ASS-Club") || (type=="ASS-Sport")) {
color = "green";
} else {
if ( (type=="PRO-Commerce-1")|| (type=="PRO-Commerce-2")|| (type=="PRO-Commerce-3")|| (type=="PRO-Randonnée")|| (type=="PRO-Expédition-Raid")) {
color = "red";
} else {
if ((type=="PRO-Terrain de loisirs") || (type=="ASS-Club-Terrain")|| (type=="PRO-Centre Formation")) {
color = "yellow";
} else {
color = "orange";
}
}
}
var link = "http://"+markers[j].getAttribute("Web");
var qui = markers[j].getAttribute("title")+"<br>"+markers[j].getAttribute("type")+"<br>"+markers[j].getAttribute("Adresse")+"<br>"+markers[j].getAttribute("CP")+" "+markers[j].getAttribute("Ville");
var contact = markers[j].getAttribute("Contact")+"<br>"+tel1+"<br>"+tel2;
var liens = "Email : <a href=mailto:"+markers[j].getAttribute("Email")+">"+markers[j].getAttribute("Email")+"</a><br>Web : <a href="+link+">"+markers[j].getAttribute("Web")+"</a>";
document.getElementById('adressebox').value= markers[j].getAttribute("Adresse")+" "+markers[j].getAttribute("CP")+" "+markers[j].getAttribute("Ville");
document.getElementById('nombox').value= markers[j].getAttribute("title");
document.getElementById('latbox').value= Local_lat;
document.getElementById('lngbox').value= Local_lng;
document.getElementById('zoombox2').value= undecode;
document.getElementById('nb').value= userid;
// IdListe = j;
addNewPoint(userid,Local_lat,Local_lng,markers[j].getAttribute("title"),markers[j].getAttribute("text"),color,online,[qui,contact,liens],["Qui","Contact","Liens"]);
map.setCenter(new GLatLng(Local_lat,Local_lng),13);
// document.location.href="#top";
// return true;
}
}
}
function Look_Marker() {
var j=0;
var title;
var titleMin;
var result;
var searched = document.getElementById('nombox').value;
for (j=0; j < markers.length;j++ ) {
title=markers[j].getAttribute("title");
titleMin = title.toLowerCase();
result = titleMin.lastIndexOf(searched.toLowerCase());
if (result != -1) {
document.getElementById('nombox2').value+= title+"\n";
}
}
// alert(searched +" Not Found :-(");
}
function addNewPoint(userid,lat, lng, title, text, type, online, htmls,labels) {
var point = new GLatLng(lat,lng);
var icon = get_icon(type,online);
var marker = new GMarker(point, icon);
if ( (type=="red") || (type=="yellow") || (type=="orange") || (type=="green")){
title = "<a class=gmlink href='member.php?u="+ userid +"'>"+ title +"</a>";
}
if (online == "1")
{
var onlineimg = "http://www.forum4x4.com/forum/images/statusicon/user_online.gif";
var onlinetxt ="online";
}
else
{
var onlineimg = "http://www.forum4x4.com/forum/images/statusicon/user_offline.gif";
var onlinetxt ="offline";
}
GEvent.addListener(marker, "click", function() {
// adjust the width so that the info window is large enough for this many tabs
if (htmls.length > 2) {
htmls[0] = '<div style="width:'+htmls.length*88+'px">' + htmls[0] + '</div>';
}
var tabs = [];
for (var i=0; i<htmls.length; i++) {
tabs.push(new GInfoWindowTab(labels[i],htmls[i]));
}
marker.openInfoWindowTabsHtml(tabs);
// document.getElementById('nombox').value= markers[IdListe].getAttribute("title");
document.getElementById('latbox').value= markers[IdListe].getAttribute("Lat");
document.getElementById('lngbox').value= markers[IdListe].getAttribute("Lng");
// document.getElementById('nb').value= markers[IdListe].getAttribute("Entree");
});
// ==================================================
map.addOverlay(marker);
}
function Load_Map() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
}
map = new GMap2(document.getElementById("map"),{mapTypes:[G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP]});
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(46.46813299215554,3.251953125),5);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
var latLngStr = '(' + center.y + ', ' + center.x + ')';
get_ll();
});
map.setCenter(new GLatLng(dlat,dlng),dzoom);
var request = GXmlHttp.create();
request.open("GET", "unitt.xml?r=6794", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
markers = xmlDoc.documentElement.getElementsByTagName("Liste");
// window.setTimeout(mapOne,timeOutDoc);
document.getElementById('nb').value=markers.length ;
} else {
// alert(request.readyState);
}
}
request.send(null);
}
function get_ll() {
var zoom = map.getZoom();
var loc = map.getCenter();
// var mylink = "?lat="+ loc.y + "&lng=" + loc.x +"&zoom=" + zoom + "";
// document.getElementById('mylinkv').value="http://www.forum4x4.com/forum/vbgooglemap.php"+mylink;
document.getElementById('latbox').value= loc.y;
document.getElementById('lngbox').value= loc.x;
document.getElementById('zoombox2').value= zoom;
}
function switchDisplay(n, force) {
window.focus();
if (document.all) {
detail=eval("document.all."+ n + '');
} else {
detail=document.getElementById(n);
}
if (detail==null) return false;
if (force!=null) {
detail.style.display=force;
} else {
if ((detail.style.display!="block") || (detail.style.display=="")) {
detail.style.display="block";
} else {
detail.style.display="none";
}
}
}
function mapOne(){
var online = 1;
var userid = 1;
if (IdListe < markers.length ) {
if ((markers[IdListe].getAttribute("Zone") == Zone) || (markers[IdListe].getAttribute("Pays") == Zone)|| (Zone == "Europe")) {
if (markers[IdListe].getAttribute("CP").length < 5){
var CP = "0"+markers[IdListe].getAttribute("CP");
} else {
var CP = markers[IdListe].getAttribute("CP");
}
if (markers[IdListe].getAttribute("Pays")=="FR"){
if (markers[IdListe].getAttribute("AdGoogle")==""){
address =CP+","+ markers[IdListe].getAttribute("Ville")+","+ markers[IdListe].getAttribute("Pays");
// alert(address);
} else {
address =markers[IdListe].getAttribute("AdGoogle")+" "+CP+","+ markers[IdListe].getAttribute("Ville")+","+ markers[IdListe].getAttribute("Pays");
}
} else {
address = markers[IdListe].getAttribute("Ville")+","+ markers[IdListe].getAttribute("Pays");
}
if (markers[IdListe].getAttribute("Lat") == "") { geocoder.getLocations(address,function(response) {
if (!response || response.Status.code != 200) {
undecode=1;
document.getElementById('adressebox').value=addres s;
document.getElementById('nombox').value= markers[IdListe].getAttribute("title");
Local_lat = 0;
Local_lng = 0;
window.setTimeout(mapOne,500);
// alert("Sorry, we were unable to geocode that address : "+address+" "+response.Status.code);
} else {
place = response.Placemark[0];
undecode = 0;
Local_lat = parseFloat(place.Point.coordinates[1]);
Local_lng = parseFloat(place.Point.coordinates[0]);
}
});
} else {
undecode = 0;
Local_lat = markers[IdListe].getAttribute("Lat");
Local_lng = markers[IdListe].getAttribute("Lng");
}
var type = markers[IdListe].getAttribute("type");
var tel1 = markers[IdListe].getAttribute("telephone_1");
var tel2 = markers[IdListe].getAttribute("telephone_2");
userid = markers[IdListe].getAttribute("Entree");
if ((type=="ASS-Club") || (type=="ASS-Sport")) {
color = "green";
} else {
if ( (type=="PRO-Commerce-1")|| (type=="PRO-Commerce-2")|| (type=="PRO-Commerce-3")|| (type=="PRO-Randonnée")|| (type=="PRO-Expédition-Raid")) {
color = "red";
} else {
if ((type=="PRO-Terrain de loisirs") || (type=="ASS-Club-Terrain")|| (type=="PRO-Centre Formation")) {
color = "yellow";
} else {
color = "orange";
}
}
}
var link = "http://"+markers[IdListe].getAttribute("Web");
var qui = markers[IdListe].getAttribute("title")+"<br>"+markers[IdListe].getAttribute("type")+"<br>"+markers[IdListe].getAttribute("Adresse")+"<br>"+markers[IdListe].getAttribute("CP")+" "+markers[IdListe].getAttribute("Ville");
var contact = markers[IdListe].getAttribute("Contact")+"<br>"+tel1+"<br>"+tel2;
var liens = "Email : <a href=mailto:"+markers[IdListe].getAttribute("Email")+">"+markers[IdListe].getAttribute("Email")+"</a><br>Web : <a href="+link+">"+markers[IdListe].getAttribute("Web")+"</a>";
// document.getElementById('adressebox').value= qui;
document.getElementById('nombox').value= markers[IdListe].getAttribute("title");
// document.getElementById('latbox').value= Local_lat;
// document.getElementById('lngbox').value= Local_lng;
document.getElementById('zoombox2').value= undecode;
addNewPoint(userid,Local_lat,Local_lng,markers[IdListe].getAttribute("title"),markers[IdListe].getAttribute("text"),color,online,[qui,contact,liens],["Qui","Contact","Liens"]);
// document.getElementById('nombox2').value +=";"+markers[IdListe].getAttribute("Entree")+";"+markers[IdListe].getAttribute("title")+";"+Local_lat+";"+Local_lng+";"+undecode+"\n";
}
window.setTimeout(mapOne,10);
}
IdListe++;
}
//]]
</script>
<!-- map -->
<div><br />
</div>
</div>
</tbody></td>
</tr>
</table>
<br />
<textarea name="nombox2" cols="20" rows="" id="nombox2" style="padding-left:5px;font-size:8pt; font-weight:bold; width:500px;background:#FFF48E;"></textarea>
Copie/coller du nom et clic sur "search name" <br />
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="tcat"> (c)2006 V2.0.2 <a href="http://www.stonyarc.com" target="_blank">StonyArc</a> - (c)2007 UniTT V1.0.0 <a href="http://www.unitt.fr" target="_blank">UniTT</a> . Pour toute correction ou ajout, contacter <a href="mailto:contact@unitt.fr" target="_blank">contact UniTT</a> </td>
<td></td>
</tr>
</table>
<br />
<div class="smallfont" align="center">Fuseau horaire GMT +1. Il est maintenant <span
class="time">06h28</span>.</div>
<br />
</div>
</div>
</div>
<!-- / close content container -->
<!-- /content area table -->
</body>
</html>
;)
C'est basé sur celui de Freeforum.
Pour acces googlemap, il faut demander une clef pour le site www.unitt.fr
voir lien (http://www.google.com/apis/maps/signup.html)
tu remplaces la mienne par celle d'unitt :
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA1fxskSWqTMcgXYwfGE6Y dxTnKhWCCPkzvBzmWaIbLTn95p7qDRTt4BLZjtcrxE2X4OhLpa kgN78Kbw" type="text/javascript"></script>
ensuite, je te donne le fichier unitt.xml qui contient toutes les data. Je le debug au fur et à mesure (merci Emeric60 ;)).
@+