Hello,

I want to set up a personal interactive map with geolocation of the user.
To view my card, I use the plug in FWD Megazoom.

I use the html5 geolocation to determine the location of the user on an image.

I have a function "calcul" that contains geolocation and a calculation to convert gps coordinates in pixel :

Code:
function successCallback(position){
	
	var LatM = position.coords.latitude;
	var LongM = position.coords.longitude;
      document.getElementById('LatM').innerHTML = "Latitude :" + position.coords.latitude;
      document.getElementById('LongM').innerHTML = "Longitude :" +  position.coords.longitude;
      document.getElementById('prec').innerHTML = "Précision :" +  position.coords.accuracy;
      //document.getElementById('speed').innerHTML = position.coords.speed;
      
    //Upper left corner / right lower corner coordinates of my card
    var Lat1 = 43.904144;
	var Long1 = 5.229525;
	//alert("Longitude 1 : " + Long1);

	var Lat2 = 43.925197;
	var Long2 = 5.186051;
	//alert("Longitude 2 : " + Long2);
	
	var imgwidth = 1015;
	var imgheight = 687;
	//alert("Size of my map : " +imgheight);

	var Xstr, Ystr;
	var X, Y;
	Xstr = LatM;       
	Ystr = LongM;   
	X = parseFloat(Xstr);     
	Y = parseFloat(Ystr);      
	//var X = 43.845448;
	//var Y = 5.110036;
	//alert("Geolocalisation X : " + Xstr);
	//alert("Geolocalisation Y : " + Y);
	
	//if (LongM<Long1 && LongM>Long2) {alert("you're not in the zone !");}
	//else {Hmap= Math.abs(Long2 - Long1);}
	Hmap = Math.abs(Long2 - Long1);
	
	//if (LatM<Lat1 && LatM>Lat2) {alert("you're not in the zone !");}
	//else {Lmap= Math.abs(Lat2 - Lat1);}
	Lmap = Math.abs(Lat2 - Lat1);
	//alert("Lmap :" + Lmap);	
	
	var LPosRel = Math.abs(Y - Long1);
	var HPosRel = Math.abs(X - Lat1);
	//alert("HPosRel : " + HPosRel);
	
	var ResL = LPosRel / Hmap;
	var ResH = HPosRel / Lmap;
	//alert("ResH : " + ResH);
	
	var Lmarker = ResL * imgwidth;    // result in pixel for Marker 
	var Hmarker = ResH * imgheight;
	
	document.getElementById("repereLpos").innerHTML = Lmarker;
	document.getElementById("repereHpos").innerHTML = Hmarker;
	
	alert("Largeur : " + Lmarker);
	alert("Hauteur : " + Hmarker);
This portion of the script works !!

Then I'd like to place Lmarker and Hmarker variables in the marker that appears like this :

Code:
		<ul data-markers="">
			<li id="coo"
			data-marker-type="tooltip"
			data-show-content="yes"
			data-reg-point="centerbottom"
			data-marker-normal-state-path="marker1.png"
			data-marker-selected-state-path="marker1-rollover.png"
			data-marker-left="xx"      // Here -> Lmarker
			data-marker-top="yy"      // Here -> Hmarker
			data-marker-width="28"
			data-marker-height="36"
			data-show-after-zoom-factor="0"
            >
			<div class='InfoDiv'>You are here</div>
			</li>
		</ul>
To change the values ​​of data-marker-left and top, I placed my function "calcul" the following script but it does not work

Code:
var liste,listeLi,element;
 
element = document.getElementById('coo');

element.setAttribute("data-marker-left", "Lmarker");
element.setAttribute("data-marker-top", "Hmarker");
Can you help me put my variables in the list that displays my marker ?

Thank you in advance