Fichier xml et google map V2

**mathier** · 24/07/2014, 23h06

Bonjour,

Je rencontre un petit problème dans un exercice (où tout le code est donné concernant l'APi map). Pourriez-vous me dépanner s'il vous plait ?

J'ai deux fichiers : index.html contenant tout ce qu'il faut pour afficher une carte google API V2 (eh oui l'exercice qui m'est donné est dépassé, on nous fait travailler sur la V2). Et data.xml contenant les latitudes et longitudes pour les markers.

Je voudrais savoir comment réussir l'appel à data.xml car j'obtiens une carte mais sans les marqueurs : je pense que c'est la partie qui ne va pas.

Est-ce que je dois mettre cette ligne de code dans le <body> de mon fichier index.html ? Ou dans l'entête ?

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

<xml id="fichierxml" src="data.xml"></xml>

Pour ce qui est du fichier data.xml, je commence par ceci avant de débuter <markers> etc. :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

La question peut sembler basique mais je ne sais pas manipuler du xml.

Merci.

**NoSmoking** · 26/07/2014, 22h19

Bonjour,

...pour afficher une carte google API V2...

la première des choses à faire, c'est de dire à celui qui t'a donné l’exercice de ce mettre à la V3 ou de se recycler, c'est un IMPERATIF.

**mathier** · 27/07/2014, 08h25

bonjour
je vais refaire l'exercice avec la V3 en tentant de réécrire le code.
mon souci reste cependant le même : l'utilisation d'un fichier data.xml qui contient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<markers>
<marker lat="..." lng=".." />
<marker lat="..." lng=".." />
</markers>

est ce que je dois mettre dans mon fichier principal qui contient déja GDownloadUrl("data.xml",function etc... (désolé c du V2 je n'eai pas encore modifié) le bout de code suivant à un endroit ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<xml id="fichierxml" src="data.xml"></xml>

merci

**mathier** · 27/07/2014, 11h19

autre question si vous le voulez bien , je suis toujours sur la version V2 : même si elle est obsolète le code devrait fonctionner non ?

en utilisant le code que l'on m'a donné en V2 j'ai une carte mais pas les marker c'est pour cela que je me pose des questions sur mon fichier xml associé
en inspectant avec chrome
j'ai "Control" et "Map.addControl is no longer supported in the Google Maps Javascript API v2"
est ce que c'est cela qui ne me donnerait pas les markers ?

merci

**NoSmoking** · 28/07/2014, 18h48

j'ai "Control" et "Map.addControl is no longer supported in the Google Maps Javascript API v2"
est ce que c'est cela qui ne me donnerait pas les markers ?

Cela veut dire, en gros et non textuellement, "Y'en a marre depuis le temps que je vous dit que la V2 est deprecated, il serait temps d'enfin comprendre que je ne ferais que les efforts minimum pour vous afficher votre carte", mais je peux me tromper ne parlant pas couramment le Google

Pour ce qui est de ton problème
- tu peux déclarer une string dans ton code que tu parse avant utilisation.
- tu peux faire l'appel à un fichier externe ce qui reste la solution la plus propre.

**NoSmoking** · 29/07/2014, 15h12

Pour ce qui est de ton problème
- tu peux déclarer une string dans ton code que tu parse avant utilisation.
- tu peux faire l'appel à un fichier externe ce qui reste la solution la plus propre.

ci dessous je te mets un exemple de ce que cela pourrait être, les 2 méthodes sont reprises, lecture d'une string XML et lecture d'un fichier XML en utilisant la même fonction au final pour l'affichage des markers.

sur base du XML suivant (fichier markers.xml dans le code)

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="UTF-8"?>
<markers>
  <marker lat="44.837368" lng="-0.576144" ville="Bordeaux" />
  <marker lat="45.194276" lng="5.731633"  ville="Grenoble" />
  <marker lat="45.767299" lng="4.834329"  ville="Lyon" />
  <marker lat="43.297612" lng="5.381042"  ville="Marseille" />
  <marker lat="48.856667" lng="2.350987"  ville="Paris" />
</markers>

et en utilisant les fonctions du script ci dessous

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
// chaine représentant le XML
var strXML =
'<?xml version="1.0" encoding="UTF-8"?>'
+'<markers>'
+'  <marker lat="44.837368" lng="-0.576144" ville="Bordeaux" />'
+'  <marker lat="45.194276" lng="5.731633"  ville="Grenoble" />'
+'  <marker lat="45.767299" lng="4.834329"  ville="Lyon" />'
+'  <marker lat="43.297612" lng="5.381042"  ville="Marseille" />'
+'  <marker lat="48.856667" lng="2.350987"  ville="Paris" />'
+'</markers>'
 
// function commune d'affichage
function createMarkers( map, data){
  // récupération des éléments marker
  var oMarkers = data.getElementsByTagName('marker');
  var i, nb = oMarkers.length;
  var lat, lng, ville;
  for(i=0; i <nb;i++){
    // récupération des données
    lat   = oMarkers[i].getAttribute('lat') ||0;
    lng   = oMarkers[i].getAttribute('lng') ||0;
    ville = oMarkers[i].getAttribute('ville') || 'undefined';
 
    // création du marker
    var oMarker = new google.maps.Marker({
       'position': new google.maps.LatLng( lat, lng),
       'title' : ville,
       'map': map
     });
  }
}
 
function loadStringXML( str, map, callback){
  // fonction de parsage string to XML
  function xmlParse(str) {
    var xmlDoc = null;
    if (window.DOMParser) {
      var parser = new DOMParser();
      xmlDoc = parser.parseFromString(str, "text/xml");
    }
    else if (window.ActiveXObject) {
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async = false;
      xmlDoc.loadXML(str);
    }
    return xmlDoc;
  }
  var oXml = xmlParse(str);
  if( oXml){
    callback( map, oXml);  
  }
}
 
function loadFichierXML( url, map, callback){
   oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  oXhr.onreadystatechange = function(){
    if( oXhr.readyState === 4 && oXhr.status === 200){
      callback( map, oXhr.responseXML);
    }
  };
  oXhr.open( 'POST', url, true);
  oXhr.send( null);
}
 
function initCarte(){
  // options des cartes
  var optCarte = {
    'center': {'lat' :46.80, 'lng' : 1.70},
    'zoom': 5,
    'backgroundColor': '#fff',
    'disableDefaultUI' : true,
    'zoomControl' : true,    
    'zoomControlOptions': {
      'style' : google.maps.ZoomControlStyle.SMALL
    },
    'mapTypeId': google.maps.MapTypeId.ROADMAP
  }
  // création des cartes  
  var oMap1 = new google.maps.Map(document.getElementById("div_carte1"), optCarte);
  var oMap2 = new google.maps.Map(document.getElementById("div_carte2"), optCarte);
  // création des markers à partir d'une string parsée
  loadStringXML( strXML, oMap1, createMarkers);
  // création des markers à partir d'un fichier chargé
  loadFichierXML('markers.xml' ,oMap2, createMarkers);
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);

l'exemple complet pour test ainsi tu auras un exemple opérationnel en V3

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
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="UTF-8">
<title>Données au format XML</title>
<meta name="Author" content="NoSmoking">
<style>
body {
    margin:0;
    padding:0;
    font:normal .80em/1.5em Verdana,Arial,Helvetica,sans-serif;
    background-color:#FFF;
}
h1 {
    font-size:1.5em;
    margin:0;
    padding:0.5em;
}
h1 {
    color:#006699;
    font-size:1.5em;
    font-style:normal;
    margin:0;
    padding:0.5em 0.5em 0;
    text-shadow:1px 1px 0 #fff;
}
.section {
    margin:0 2em 2em;
}
.section h2 {
    color:#48b;
    font-size:1.25em;
    margin:0.5em 0.5em 0.5em -0.5em;
}
#page {
    width:40em;
    margin:0 auto;
}
.cadre_carte {
    width:20em;
    height:20em;
    margin:0 auto;
    border:1px solid #CCC;
    padding:0.25em;
    box-shadow:0 2px 4px 2px #CCC;
}
#div_carte1,#div_carte2 {
    height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script>
// chaine représentant le XML
var strXML =
'<?xml version="1.0" encoding="UTF-8"?>'
+'<markers>'
+'  <marker lat="44.837368" lng="-0.576144" ville="Bordeaux" />'
+'  <marker lat="45.194276" lng="5.731633"  ville="Grenoble" />'
+'  <marker lat="45.767299" lng="4.834329"  ville="Lyon" />'
+'  <marker lat="43.297612" lng="5.381042"  ville="Marseille" />'
+'  <marker lat="48.856667" lng="2.350987"  ville="Paris" />'
+'</markers>'
 
// function commune d'affichage
function createMarkers( map, data){
  // récupération des éléments marker
  var oMarkers = data.getElementsByTagName('marker');
  var i, nb = oMarkers.length;
  var lat, lng, ville;
  for(i=0; i <nb;i++){
    // récupération des données
    lat   = oMarkers[i].getAttribute('lat') ||0;
    lng   = oMarkers[i].getAttribute('lng') ||0;
    ville = oMarkers[i].getAttribute('ville') || 'undefined';
 
    // création du marker
    var oMarker = new google.maps.Marker({
       'position': new google.maps.LatLng( lat, lng),
       'title' : ville,
       'map': map
     });
  }
}
 
function loadStringXML( str, map, callback){
  // fonction de parsage string to XML
  function xmlParse(str) {
    var xmlDoc = null;
    if (window.DOMParser) {
      var parser = new DOMParser();
      xmlDoc = parser.parseFromString(str, "text/xml");
    }
    else if (window.ActiveXObject) {
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async = false;
      xmlDoc.loadXML(str);
    }
    return xmlDoc;
  }
  var oXml = xmlParse(str);
  if( oXml){
    callback( map, oXml);  
  }
}
 
function loadFichierXML( url, map, callback){
   oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  oXhr.onreadystatechange = function(){
    if( oXhr.readyState === 4 && oXhr.status === 200){
      callback( map, oXhr.responseXML);
    }
  };
  oXhr.open( 'POST', url, true);
  oXhr.send( null);
}
 
function initCarte(){
  // options des cartes
  var optCarte = {
    'center': {'lat' :46.80, 'lng' : 1.70},
    'zoom': 5,
    'backgroundColor': '#fff',
    'disableDefaultUI' : true,
    'zoomControl' : true,    
    'zoomControlOptions': {
      'style' : google.maps.ZoomControlStyle.SMALL
    },
    'mapTypeId': google.maps.MapTypeId.ROADMAP
  }
  // création des cartes  
  var oMap1 = new google.maps.Map(document.getElementById("div_carte1"), optCarte);
  var oMap2 = new google.maps.Map(document.getElementById("div_carte2"), optCarte);
  // création des markers à partir d'une string parsée
  loadStringXML( strXML, oMap1, createMarkers);
  // création des markers à partir d'un fichier chargé
  loadFichierXML('markers.xml' ,oMap2, createMarkers);
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);
 
</script>
</head>
<body>
<div id="page">
    <h1>Chargement de données au format XML</h1>
    <div class="section">
        <h2>string XML</h2>
        <p>Chargement des données des markers à partir d'une string au format XML</p>
        <div class="cadre_carte">
            <div id="div_carte1">
            </div>
        </div>
    </div>
    <div class="section">
        <h2>markers.xml</h2>
        <p>Chargement des données des markers à partir d'un fichier XML</p>
        <div class="cadre_carte">
            <div id="div_carte2">
            </div>
        </div>
    </div>
</div>
</body>
</html>

**mathier** · 29/07/2014, 16h47

merci pour les fichiers

Fichier xml et google map V2 [Google Maps]

APIs Google

Discussions similaires

Partager

Partager