Bonjour,

J'ai développé une petite interface en jquery mobile avec cette structure :

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
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>App title</title>
        <link rel="stylesheet" href="./css/jquery.mobile-1.3.2.css">
        <link rel="stylesheet" href="./css/styles.css">
        <script type="text/javascript" src="./js/jquery-2.0.3.js"></script>
        <script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript" src="./js/jquery.ui.map.full.min.js"></script>
        <script type="text/javascript" src="./js/jquery.ui.map.js"></script>
 
 
    </head>
    <body>
 
<!--        Je ne mets pas cette fonction spécialement dans le head car jQuery ne l'interprète pas au premier lancement de la page-->
        <script type="text/javascript">
 
            function loadMap()
            {
 
                // Coordonnées Australie
                var mobileDemo = { 'center': '-26.884067,150.288971', 'zoom': 8 };
 
                $('#map_canvas').gmap(
                {
                    'center': mobileDemo.center,
                    'zoom': mobileDemo.zoom,
                    'disableDefaultUI':false, // affiche les boutons +/- pour le zoom et le choix Plan/Satellite
                    'callback': function()
                    {
                        var self = this;
                        self.addMarker({'position': this.get('map').getCenter() }).click(function()
                        {                                                                                        
                            self.openInfoWindow({ 'content': 'Adresse' }, this);
                        });
                    }
                }); 
 
 
 
 
 
 
            }
 
        </script>
 
 
        <!-- Home -->
        <div data-role="page" id="accueil">
            <div data-theme="c" data-role="header">
                <a href="index.php" data-role="button" data-icon="home" data-iconpos="notext"></a>   
                <div align="center" class="logo">
                    <img src="./images_app/Logo-transparent.png" width="75%" />
                </div>                
            </div>
            <div data-role="content">
 
                <table border="0" bordercolor="#000" width="100%">
                    <tr>
                        <td align="center">
                            <table border="0" bordercolor="#FF0000" width="100%">
                                <tr>
                                    <td align="center" width="30%">
                                        <img src="./images_app/Icone.png" class="imgproduct" />
                                    </td>
                                    <td align="left" width="70%">
                                        <span id="desc1" class="number">000000000</span><br />
                                        <span id="desc2" class="number">Number</span><br />
                                        <span id="desc3" class="number">Desc</span><br />
                                        <span id="desc4" class="number">Long desc</span>
                                    </td>        
                                </tr>
                            </table>                            
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <table border="0" bordercolor="#FF0000" width="100%">
                                <tr>
                                    <td>
                                        Identification
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        <div data-role="collapsible-set" data-theme="c">
                                            <div data-role="collapsible">
                                                <h3>
                                                    General info
                                                </h3>
                                                blablabla
                                            </div>
                                            <div data-role="collapsible">
                                                <h3>
                                                    3e menu
                                                </h3>   
                                                <ul>
                                                    <li>el1</li>
                                                    <li>el2</li>
                                                    <li>el3</li>
                                                    <li>el4</li>
                                                    <li>el5</li>
                                                    <li>el6</li>
                                                </ul>
 
 
                                            </div>
                                            <div data-role="collapsible">
                                                <h3>
                                                    Custom
                                                </h3>
                                            </div>
                                            <div data-role="collapsible">                                                
                                                <h3 onclick="loadMap()">
                                                    Map
                                                </h3>                                                
                                                <div id="map_canvas"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>               
            </div>
            <div data-theme="c" data-role="footer" class="bienvu"> 
                <span>
                    footer
                </span>
            </div>
        </div>
    </body>
</html>
Le problème c'est que j'aimerais que la map google s'affiche au premier chargement de la page. Là il faut que je charge la page une première fois puis que je la recharge pour que la map s'affiche sinon mon div est vide... J'ai l'impression que jQuery mobile squeeze mon code javascript au premier chargement, que je mette mon code dans le head ou dans le body, ça ne change rien. Alors j'ai tenté de jouer sur le clic du h3 mais ça ne marche pas non plus. Comment faire ?

Merci par avance.