fonction onload dans table ou div

**diengkals** · 11/02/2013, 13h44

bonjour je veux charger une carte google maps dans mes pages.
pour cela j ai coder une fonction javscript que je dois appeler dans une div ou table pour l 'affichage . normalement on appelle le plus souvent la fonction onload dans body mais la je ne peux pas le faire car j'ai deux page index.html qui va appeler le contenu d' une autre page php a son tour va charger la carte google maps .
voici mes codes

page index

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
	<!-- Début l'onglet 2-->
        <div align="center" id="content_2" class="content">
			<form name="onglet2"  id="onglet2" method="post">
			<fieldset style="width: 960px">
			    <legend>Repertoire des entreprises</legend>
                            <table>
                                <tr>
                                    <td><div class="rech_secteur">
                                        <label>Rubrique : </label>
                                        <select name='rubrique' id='rubrique'  onchange='go()'>
                                                <option value='-1'>Choisir une rubrique! </option>
                                                <?php
                                                        $requete = "select * from rubrique order by libelle";
                                                        $result = mysql_query($requete,$conn_rep) or die(mysql_error());
                                                        while($reponse = mysql_fetch_array($result)){
                                                                echo '<option value="'.$reponse['ref_rubrique'].'">'.utf8_encode($reponse['libelle']).'</option>';
                                                        }
                                                ?>
                                        </select><br/><br/>
 
                                        <label>Sous-Rubrique : </label>
                                        <div id='sous-rubrique_div' style='display:inline'>
                                        <select name='sous_rubrique'>
                                                <option value='-1'>Choisir une sous-rubrique!</option>
                                        </select>
                                        </div>
                                     </div></td>
                                            <td>
                                                <div align="right" class="rech_rapide">
                                                    <input name="texte"  onclick="effacer_texte()" type="text" value="Saisir un mot!"  size="15" />
                                                    <input name="rech" class="b_img" type="button" value="Rechercher" onClick="rech_cle()" />
                                                </div></td>
                                        </tr>
                                    </table>
                            <div>
				<label>Soci&eacute;t&eacute; : </label>
				<div id='societe_div' style='display:inline'>
                                    <select name='societe' id='societe' onchange='activ()'>
                                        <option value='-1'>Choisir une soci&eacute;t&eacute;!</option>
				</select>
				</div><br />
				<span id='infos_societe' >
				</span><br/><br/>
                                <span id='envoi_sms_rep' >
				</span>
 
                            </div>
 
			</fieldset>
 
			</form>
 
		</div>
		<!-- Fin l'onglet 2-->

le contenu de la deuxieme page qui contient une fonction javascript initialize() pour charger la carte google maps

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<?php
    require_once('php/connect-inc.php');
 
    if(isset($_POST["idsociete"])){
		$requete = "select libelle,s_libelle from rubrique, sous_rubrique, societe where societe.numero= ".$_POST["idsociete"]." and societe.ref_srubrique=sous_rubrique.ref_srubrique and sous_rubrique.ref_rubrique = rubrique.ref_rubrique";
		$rub = mysql_query($requete,$conn_rep);
		$ss = mysql_fetch_array($rub);
        $requete = "select * from societe where numero = ".$_POST["idsociete"];
        $query = mysql_query($requete, $conn_rep);
        if(($nbr = mysql_num_rows($query))>0){
            $ln = mysql_fetch_array($query);
			  $lat=$ln['latitude'];
			  $lon=$ln['longitude'];
            $message = utf8_encode($ln['nom']).':Adresse: '.utf8_encode($ln['adresse']).'; Tel:'.utf8_encode($ln['tel']).'; Fax:'.utf8_encode($ln['fax']).'; BP:'.utf8_encode($ln['bp']);
 
			echo ' 
			<p align="left">Rubrique: '.$ss['libelle'].' ==> Sous-Rubrique: '.$ss['s_libelle'].'</p>';
             echo ' <table width="450" align="left" >
                      <tr>
                          <td valign="top" align="right" width="135"><strong><u>Adresse</u> :</strong>  </td>
                          <td align="left" colspan="3"><div class="societe" align="left">'.utf8_encode($ln['adresse']).'</div></td>
                      </tr>
                      <tr>
                          <td align="right" width="135"><strong><u>Telephone</u> :</strong></td>
                          <td colspan="3"><div class="societe" align="left">'.utf8_encode($ln['tel']).'</div></td>
                      </tr>
                      <tr>
                          <td align="right" width="135"><strong><u>Fax</u> :</strong></td>
                          <td colspan="3"><div class="societe" align="left">'.utf8_encode($ln['fax']).'</div></td>
                      </tr>
                      <tr>
                          <td align="right" width="135"><strong><u>BP</u> :</strong></td>
                          <td colspan="3"><div class="societe" align="left">';
                                if($ln['bp'] != 0) echo utf8_encode($ln['bp']);
                          echo '</div></td>
                      </tr>
					  <tr>
                          <td align="right" width="135"><strong><u>Commentaire</u> :</strong></td>
                          <td colspan="3"><div class="societe" align="left">'.utf8_encode($ln['commentaire']).'</div></td>
                      </tr>
                      <tr>
                          <td align="right" width="135"> &nbsp; </td>
                          <td colspan="3"><div align="left">&nbsp;</div></td>
                      </tr>
                      <tr>
                          <td colspan="4"  width="135"><div align="center"><strong><u>Envoyer l\'adresse par SMS </u></strong></div></td></td>
                      </tr>
                      <tr>
                          <td align="right" width="135"><strong><u>Numero mobile</u> :</strong></td>
                          <td colspan="3"><div align="left"><input name="num_dest" type="text" maxlength="7" size="12" /></div></td>
                      </tr>
                      <tr>
                          <td align="right" width="135"><input name="message" id="message"  type="hidden" value="'.$message.'" /> </td>
                          <td colspan="3"><div align="left"><input name="envoyer" class="b_img" type="button" value="Envoyer SMS" onClick="envoyer_sms()" /></div></td>
                      </tr>
                   </table>';
				   ?>
					<script type="text/javascript">
			function initialize() {
					var  lat='<?php echo $lat; ?>'
					var  lon=<?php echo $lon; ?>"
					var  maposition=  new google.maps.LatLng(lat,lon);
				  map = new google.maps.Map(document.getElementById("map"), {
						zoom: 15,
						center: maposition,
						mapTypeId: google.maps.MapTypeId.ROADMAP
 
					  }); 
 
			  var marker = new google.maps.Marker({
               position: maposition,
                map: map,
                title: "Click to zoom"
                      });
 
 
				  } 
           </script>
 
		<table id="map" width="500"  height="400" align="right   onload="intialize()" >   
 
			          </table> 
 
		<?php
        }
    }
?>

si qu'il a une idée pour afficher la carte google dans mon tableau ou une autre alternative pour affiche la carte je suis un preneur voici une apercu de ma page pour mieux visionner le probleme

**NoSmoking** · 11/02/2013, 18h59

Bonjour,

l'élément TABLE ne subit pas l'événement load.

Tu n'as qu'a mettre l'appel de la fonction en fin de page chargée.

**diengkals** · 12/02/2013, 11h05

bonjour , merci de votre aide .
J'ai essaie de coder de la maniere suivante mais rien ne se passe

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
 
<div id="maps" width="500"  height="400" align="right" onload="initialize()" >  
 
			          </div> ';
 
					  ?>
				  <script type="text/javascript">
			 function initialize() {
					var  lat='<?php echo $lat; ?>',
					var  lon= '<?php echo $lon;?>',
					var  maposition=  new google.maps.LatLng(lat,lon);
				  map = new google.maps.Map(document.getElementById("maps"), {
						zoom: 15,
						center: maposition,
						mapTypeId: google.maps.MapTypeId.ROADMAP
 
					  }); 
 
			  var marker = new google.maps.Marker({
               position: maposition,
                map: map,
                title: "Click to zoom"
                      });
 
 
				  } 
 
           </script>
 
		   <script type="text/javascript">
                 document.body.onload = initialize();
            </script>

je ne sais pas si cela votre suggestion merci d'avance

**NoSmoking** · 12/02/2013, 22h26

Non tu n'y es pas du tout
exemple

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="maps" style="width:500px;height:400px"></div>
<script type="text/javascript">
function initialize() {
  var lat= 46.80;
  var lon=  1.70;
  map = new google.maps.Map(document.getElementById("maps"), {
    zoom: 15,
    center: new google.maps.LatLng(lat,lon),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var marker = new google.maps.Marker({
    position: maposition,
    map: map,
    title: "Click to zoom"
  });
}
// appel de la fonction après que l'élément ait été crée dans le DOM
initialize();
</script>
</body>
</html>

regarde ou et comment est appelée la fonction initialize dans ce morceau de code.

**diengkals** · 13/02/2013, 10h43

merci de votre de votre ,
mon problème ici est que ma page qui affiche la carte géographique est appelé dans une autre page html par un fonction javascript ,
par contre si j' exécute la fonction dans une page a part ça marche mais si cette page est appelée par une autre page rien ne se passe:
Par exemple ici j ai une page acceuil qui contient toutes les banques maintenant si je sélectionne une banque il m affiche les détails de la banque et la carte de la géolocalisation .

ici acceuil contient la liste déroulante de la banque et infobanque.php contient les détails et la carte de géolocalisation

merci d'avance

**NoSmoking** · 13/02/2013, 18h43

J'ai du mal à bien comprendre comment est agencé tout cela.

- Une page INDEX qui charge une page, comment et ou, méthode Ajax, IFRAME... ?

- Quelles sont les informations récupérées coté serveur, quelle quantité de données sont manipulées ?

fonction onload dans table ou div

APIs Google

Discussions similaires

Partager

Partager