Carte interactive - problème javascript / html 5 data-*

Bonjour,

Je souhaite mettre en place une carte interactive personnelle avec la géolocalisation de l'utilisateur.
Pour afficher ma carte, j'utilise le plug in FWD Megazoom .

J'utilise la géolocalisation html5 pour déterminer l'emplacement de l'utilisateur sur une image.

Le 1er script basé sur l'API google (partie du code):

function successCallback(position){
    var LatM = position.coords.latitude;
    var LongM = position.coords.longitude;
    document.getElementById("LatM").innerHTML = position.coords.latitude;
    document.getElementById("LongM").innerHTML = position.coords.longitude;
};

J'obtiens bien la longitude et latitude de l'utilisateur :

Mon 2eme script est une règle de 3 pour convertir les coordonnées géographique en pixel (partie du code):

function calcul() {
    var Lmarker = ResL * imgwidth; // résultat en pixel pour placer le Marker sur l'image.
    var Hmarker = ResH * imgheight;
    document.getElementById("repereLpos").innerHTML = Lmarker;
    document.getElementById("repereHpos").innerHTML = Hmarker;
}

J'obtiens bien la hauteur et la largeur en pixel :

<p>
    Point.Largeur : <span id="repereLpos"></span><br>
    Point.Hauteur : <span id="repereHpos"></span><br>
</p>

J'aimerais reporter repereLpos & repereHpos dans la page html qui affiche le marqueur sous cette forme :

<!-- MARQUEUR POSITION --> 
<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= <-- ici repereLpos -->
      data-marker-top= <-- ici repereHpos -->
      data-marker-width=28
      data-marker-height=36 
      data-show-after-zoom-factor=0>
    </li>
</ul>

Je peux agir sur data-marker-left / -top avec le code ci-dessous mais seulement si j'entre des chiffres :

<script language="javascript">
var listeLi,element;

var element = document.getElementById('coo');
element.setAttribute("data-marker-left", "300");
element.setAttribute("data-marker-top", "300");
</script>

je pense que le problème vient du fichier .js du plug in Megazoom qui gere l'affichage de la carte et des marker :

Vous pouvez me dire si vous voyez quelque chose qui pourrait empêcher l'affichage de variables (en fait autre chose que des nombres) dans cette portion de code :

m=FWDUtils.hasAttribute(h,"data-marker-left");if(!m){r.showMarkerError("data-marker-left",b);return}
m=FWDUtils.hasAttribute(h,"data-marker-top");if(!m){r.showMarkerError("data-marker-top",b);return}

m=FWDUtils.hasAttribute(h,"data-marker-width");if(!m){r.showMarkerError("data-marker-width",b);return}m=FWDUtils.hasAttribute(h,"data-marker-height");if(!m){r.showMarkerError("data-marker-height",b);return}m=FWDUtils.hasAttribute(h,"data-show-after-zoom-factor");if(!m){r.showMarkerError("data-show-after-zoom-factor",b);return}l.type=FWDUtils.getAttributeValue(h,"data-marker-type");f=l.type=="link"||l.type=="tooltip"||l.type=="infowindow";if(!f){r.showMarkerTypeError(l.type,b);return}if(FWDUtils.hasAttribute(h,"data-show-content")){if(FWDUtils.trim(FWDUtils.getAttributeValue(h,"data-show-content"))=="no"){y=false}else{y=true}}else{y=true}l.normalStatePath_str=FWDUtils.trim(FWDUtils.getAttributeValue(h,"data-marker-normal-state-path"));l.selectedStatePath_str=FWDUtils.trim(FWDUtils.getAttributeValue(h,"data-marker-selected-state-path"));l.toolTipLabel=FWDUtils.getAttributeValue(h,"data-tool-tip-label")||undefined;

l.markerX=(FWDUtils.getAttributeValue(h,"data-marker-left"));if(isNaN(l.markerX))l.markerX=0;
l.markerY=(FWDUtils.getAttributeValue(h,"data-marker-top"));if(isNaN(l.markerY))l.markerY=0;

Avez vous une solution ?
Merci d'avance