Bonjour,

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 :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
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

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
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 :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<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 :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- MARQUEUR POSITION --> 
<ul data-markers="">
	<li
	  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>
		<div class="InfoDiv">Vous etes ici</div>
	</li>
</ul>

Je vois pas comment inserer / appeler du javascript dans la partie html.

La balise <li> n'accepte pas d'autre balise (<script type="text/javascript"> ...... / data-marker-left id="reperePos) "

Avez vous une solution ?
Merci d'avance