Passer une variable � une fonction javascript en HTML

**flyjodel** · 03/11/2013, 03h57

Bonjour,

je souhaite en tapant une URL du style :
http://www.example.com/upload.html?latitude=45&longitude=10

passer les coordonn�es � une page qui serait la suivante :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
    <head>
        <title>Tutoriel Google Maps</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <!-- Elément Google Maps indiquant que la carte doit être affiché en plein écran et
        qu'elle ne peut pas être redimensionnée par l'utilisateur -->
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <!-- Inclusion de l'API Google MAPS -->
        <!-- Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            function initialiser(lat=49,lon=2) {
                        
                                var latlng = new google.maps.LatLng(lat, lon);
                //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
                //de définir des options d'affichage de notre carte
                var options = {
                    center: latlng,
                    zoom: 19,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                 
                //constructeur de la carte qui prend en paramêtre le conteneur HTML
                //dans lequel la carte doit s'afficher et les options
                var carte = new google.maps.Map(document.getElementById("carte"), options);
            }
        </script>
    </head>
 
    <body onload="initialiser()">
        <div id="carte" style="width:100%; height:100%"></div>
    </body>
</html>

Dans la fonction INITIALISER du code javascript, j'arrive � passer les param�tres d�finis Lat et Lon, mais j'aimerais les r�cup�rer auparavant par $_GET['latitude'] etc.

Est-ce possible et comment faire pour r�cup�rer les variables pass�es dans l'URL ?

Merci beaucoup !

**NoSmoking** · 03/11/2013, 09h43

Bonjour,

Comment r�cup�rer les param�tres pass�s dans une url ?

**flyjodel** · 03/11/2013, 14h49

Merci beaucoup, mais comme c'est compliqu�! !
Enfin la r�ponse existait d�j�, il eut fallu que je creusasse plus...
Merci!

**bretus** · 03/11/2013, 15h41

Bonjour,

Que penses-tu de la chose suivante :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
    <head>
        <title>Tutoriel Google Maps</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <!-- Elément Google Maps indiquant que la carte doit être affiché en plein écran et
        qu'elle ne peut pas être redimensionnée par l'utilisateur -->
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <!-- Inclusion de l'API Google MAPS -->
        <!-- Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
 
            var lon = <?php echo floatval( getParam( 'lon', 2.0 ) ) ?> ;
            var lat  = <?php echo floatval( getParam( 'lat', 49.0 ) ) ?> ;
 
            function initialiser() {
                        
                                var latlng = new google.maps.LatLng(lat, lon);
                //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
                //de définir des options d'affichage de notre carte
                var options = {
                    center: latlng,
                    zoom: 19,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                 
                //constructeur de la carte qui prend en paramêtre le conteneur HTML
                //dans lequel la carte doit s'afficher et les options
                var carte = new google.maps.Map(document.getElementById("carte"), options);
            }
        </script>
    </head>
 
    <body onload="initialiser()">
        <div id="carte" style="width:100%; height:100%"></div>
    </body>
</html>

Avec :

Code php :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
function getParam( $name, $defaultValue = null ){
    if ( isset( $_GET[$name] ) ){
        return $_GET[$name] ;
    }else if ( isset( $_POST[$name] ) ){
        return $_POST[$name] ;
    }else{
        return $defaultValue ;
    }
}

**flyjodel** · 03/11/2013, 16h27

Dans la FAQ, le benet que je suis a pass� presque 20 minutes � comprendre pourquoi l'exemple ne fonctionnait pas :

&amp; -> &
for(i=0;i<first.length;i++){ -> for(i=0;i<first.length;i++){
&</script> -> </script>

Code :

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
17
18
<script type="text/javascript">
    var nom=new Array();
    var valeur=new Array();
 
    // On enlève le ?
    param = window.location.search.slice(1,window.location.search.length);
 
    // On sépare le paramètres....
    // first[0] est de la forme param=valeur
 
    first = param.split("&amp;");
 
    for(i=0;i&lt;first.length;i++){
        second = first[i].split("=");
        nom[i] = second[0];
        valeur[i] = second[1];
    }
&</script>

**NoSmoking** · 03/11/2013, 16h46

Merci du retour.
L'info est remont�e, http://www.developpez.net/forums/d13...es-passes-url/

**flyjodel** · 03/11/2013, 19h11

Envoy� par bretus

Bonjour,

Que penses-tu de la chose suivante :

alors en toute humilit�, j'avoue que je n'en pense pas grand chose dans la mesure o� je suis d�butant en javascript et d'autre part que je n'arrive pas � faire fonctionner ton script...

Mais j'ai peut-�tre commis une erreur en rassemblant les deux fonctions dans le m�me script ? Voici ce que j'ai concat�n� :

Code :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
    <head>
        <title>Tutoriel Google Maps</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <!-- Elément Google Maps indiquant que la carte doit être affiché en plein écran et
        qu'elle ne peut pas être redimensionnée par l'utilisateur -->
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <!-- Inclusion de l'API Google MAPS -->
        <!-- Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
 
 
			function getParam( $name, $defaultValue = null ){
				if ( isset( $_GET[$name] ) ){
					return $_GET[$name] ;
				}else if ( isset( $_POST[$name] ) ){
					return $_POST[$name] ;
				}else{
					return $defaultValue ;
				}
			}
 
            var lon = <?php echo floatval( getParam( 'lon', 2.0 ) ) ?> ;
            var lat  = <?php echo floatval( getParam( 'lat', 49.0 ) ) ?> ;
 
            function initialiser() {
 
				var latlng = new google.maps.LatLng(lat, lon);
                //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
                //de définir des options d'affichage de notre carte
                var options = {
                    center: latlng,
                    zoom: 19,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
 
                //constructeur de la carte qui prend en paramêtre le conteneur HTML
                //dans lequel la carte doit s'afficher et les options
                var carte = new google.maps.Map(document.getElementById("carte"), options);
            }
        </script>
    </head>
 
    <body onload="initialiser()">
        <div id="carte" style="width:100%; height:100%"></div>
    </body>
</html>

**bretus** · 03/11/2013, 21h45

Re,

Je t'ai donn� un exemple de traitement de cette variable en PHP vu que tu parlais de $_GET['latitude'] au d�but.

Voici l'exemple complet, avec le zoom en bonus :

Code php :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?php
function getParam( $name, $defaultValue = null ){
	if ( isset( $_GET[$name] ) ){
		return $_GET[$name] ;
	}else if ( isset( $_POST[$name] ) ){
		return $_POST[$name] ;
	}else{
		return $defaultValue ;
	}
}
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
    <head>
        <title>Tutoriel Google Maps</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <!-- Elément Google Maps indiquant que la carte doit être affiché en plein écran et
        qu'elle ne peut pas être redimensionnée par l'utilisateur -->
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <!-- Inclusion de l'API Google MAPS -->
        <!-- Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
             var lon = <?php echo floatval( getParam( 'lon', 2.0 ) ) ?> ;
             var lat  = <?php echo floatval( getParam( 'lat', 49.0 ) ) ?> ;
             var zoom  = <?php echo intval( getParam( 'z', 19 ) ) ?> ;
 
            function initialiser() {
 
		var latlng = new google.maps.LatLng(lat, lon);
                //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
                //de définir des options d'affichage de notre carte
                var options = {
                    center: latlng,
                    zoom: zoom,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
 
                //constructeur de la carte qui prend en paramêtre le conteneur HTML
                //dans lequel la carte doit s'afficher et les options
                var carte = new google.maps.Map(document.getElementById("carte"), options);
            }
        </script>
    </head>
 
    <body onload="initialiser()">
        <div id="carte" style="width:100%; height:100%"></div>
    </body>
</html>

**flyjodel** · 04/11/2013, 01h24

en effet, cela fonctionne parfaitement, et je me rends compte que je suis loin d'avoir les capacit�s d'�crire ce genre de chose. Je n'y trempe vraiment pas assez souvent.

Cela m'aide vraiment bien, tous mes remerciements !

Passer une variable � une fonction javascript en HTML

JavaScript

Discussions similaires

Partager

Partager