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