[UI Mobile] Intégration de Google maps

Intégration de Google maps

Bonjour,

J'ai un soucis et ça fait plus de quelque jour que je cherche. (Je n'ai pas trouvé le forum pour JQuery donc je sais pas si je peux poster dans la partie JAVASCRIPT)
Je suis actuellement en train de coder une carte google maps avec JQuery Mobile et je le test sur mon smartphone (Samsung galaxy s2).

Mon soucis est que je dois rafraîchir la page pour que ma carte s'affiche. Avez vous une idée ?

Voici mon code :

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
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title></title>
        <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="css/my.css" />
        <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
 
    <style type="text/css">
        .gmap { height: 330px; width: 100%; margin: 0px; padding: 0px }
    </style>
     <script >
 
  $(document).ready(function () {
 
 
           var map, latlng, myoptions;
 
            function initialize() {
                latlng = new google.maps.LatLng(40.716948, -74.003563);
                myoptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
                map = new google.maps.Map(document.getElementById("map"), myoptions);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    visible: true
                });
            }
 
 
            $('.page-map').live("pagecreate", function() {
                initialize();
            });
 
            $('.page-map').live('pageshow',function(){
                //console.log("test");
                googlemaps();
                google.maps.event.trigger(map, 'resize');
                map.setOptions(myoptions);
            });
            function googlemaps(){   
              var address = window.localStorage.getItem("url");
              geocoder = new google.maps.Geocoder();
                geocoder.geocode({ 'address': address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
          });
                google.maps.event.trigger(map, 'resize');
 
 
              } else {
                //alert("Pas de localisation");
              }
            }); 
          }
          });
 
        </script>
</head>
 
<body>
   <div data-role="page" class="page-map">
        <div data-theme="b" data-role="header" data-id="head1" data-position="fixed">
            <a href="index.html" data-role="button" data-transition="fade"  data-icon="home" data-iconpos="notext" rel="external"></a>
            <a href="index.html#page9" data-role="button" data-transition="fade"  data-icon="search"  class="ui-btn-right" data-iconpos="notext" rel="external"></a>
            <h3>FICHE</h3>
        </div>
        <div data-role="content">
            <a href="" data-role="button" data-transition="fade" data-inline="true" data-rel="back">< Retour</a>
            <div id="map" class="gmap"></div>
        </div>
    </div>
</body>
</html>

Je fais un $(document).ready(function () pour qu'il me charge bien on javascript mais cela ne semble pas fonctionner non plus.

Si vous pouviez m'aider , je serais l'homme le plus heureux de la terre =)))))))

Merci d'avance !!!

Tu veux que la carte s'initialise lorsque la page est créer ?

Si oui tu as cette partie du code qui es dans $(document).ready().

Donc pourquoi ne pas sortir le initialize(); de la foncion ?
Code:

1 2 3 4 $('.page-map').live("pagecreate", function() { initialize(); });
Attention le .live est déprécié avec les nouvelles versions de jquery, il est remplacé par le .on et puis avec jquery mobile on ne fais pas de $(document).ready(function()) mais plutôt Important: Use $(document).bind('pageinit',function{})

Salut!
Merci pour ta réponse! Je viens d'essayer et ma carte n'apparaît plus lorsque je sors le initialize de ma fonction. Ma carte ne marche plus même lorsque je refresh ma page. Sinon j'ai trouvé mon soucis mais je ne sais pas comment le résoudre >.<

Voici le problème: J'ai un fichier index.php qui m'envoie vers ma page en question (Contenant la carte google). Le soucis est qu'il ne lis pas mon head (La ou j'appelle tout mes script) qui contient mes informations (appelle de la bibliothèque JQUERY). Il garde l'ancien head.php (index.php) en paramètre car il bloque sur l'appelle d'une bibliothèque JQUERY MOBILE.

Code:

<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

Donc je ne vois vraiment pas comment résoudre le problème vu qu'il bloque sur le JQUERY Mobile du constructeur mais lorsque je recharge la page, il arrive à le lire

J'espère avoir été compréhensible xDDD

Merci d'avance si vous savez comment résoudre le problème =)