Passer une variable à une fonction javascript en HTML

Version imprimable

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:

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 !

03/11/2013, 09h43
NoSmoking

Bonjour,
:faq: Comment récupérer les paramètres passés dans une url ?
03/11/2013, 14h49
flyjodel

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

Bonjour,

Que penses-tu de la chose suivante :

Code:

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:

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 ;
    }
}

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:

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>

03/11/2013, 16h46
NoSmoking

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

Citation:

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:

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>

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:

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>

04/11/2013, 01h24
flyjodel

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 !