Problème champs HTML et javascript
Bonjour,
Je suis entrain de réaliser une application basée sur l'API google map intégrée dans une champs HTML sur Windev mais j'ai un léger souci.
Cette application récupère des données géographiques dans une base de donnée pour les afficher sous forme de marqueurs sur une carte google map.
Lorsque je teste mon application sur mon serveur local (avec google chrome) je n'ai absolument aucun souci. En revanche sur Windev dans mon champs HTML (j'ai essayé en chargeant la page HTML dans le champs) ma carte n'actualise pas mes marqueurs.
J'ai par hasard testé mon script sur internet explorer et effectivement, sur IE mes marqueurs ne s'actualisent pas non plus.
Du coup je cherche à savoir, dans les améliorations récentes, est ce qu'il y a possibilité d'utiliser Google chrome à la place de IE dans mon champs HTML?
Ou sinon est ce que quelqu'un sait comment faire pour résoudre ce souci ?
Voici mon code HTML qui affiche la carte et les marqueurs (je ne l'ai pas encore arrangé de façon propre, désolé) :
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
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
|
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Using MySQL and PHP with Google Maps</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<input type="text" id="latitude" />
<input type="text" id="longtitude" />
<a onclick="updatePosition()" >update </a>
<div id="floating-panel">
<input onclick="clearMarkers();" type=button value="Hide Markers">
<input onclick="showMarkers();" type=button value="Show All Markers">
<input onclick="deleteMarkers();" type=button value="Delete Markers">
</div>
</head>
<html>
<body>
<div id="map"></div>
<script>
var customLabel = {
restaurant: {
label: 'R'
},
choc: {
label: 'C'
},
bar: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(48.5, 7.6),
zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
setInterval(function()
{
downloadUrl('http://localhost/Code_for_WINDEV/Generateur_XML_echo.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}, 3000);
// Change this depending on the name of your PHP or XML file
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MON_API_MASQUEE&callback=initMap">
</script>
</body>
</html> |
Et voici le code qui récupère le fichier XML issu de la base de donnée :
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
|
<?php
//require("phpsqlajax_dbinfo.php");
$username="root";
$password="";
$database="geolocalisation";
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
$connection=mysqli_connect ('localhost', $username, $password);
if (!$connection) {
die('Not connected : ' . mysqli_error());
}
// Set the active MySQL database
$db_selected = mysqli_select_db($connection,$database);
if (!$db_selected) {
die ('Can\'t use db : ' . mysqli_error());
}
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysqli_query($connection,$query);
if (!$result) {
die('Invalid query: ' . mysqli_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo "<?xml version='1.0' ?>";
echo '<markers>';
$ind=0;
// Iterate through the rows, printing XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){
// Add to XML document node
echo '<marker ';
echo 'id="' . $row['id'] . '" ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
$ind = $ind + 1;
}
// End XML file
echo '</markers>';
?> |
Merci d'avance pour vos réponses
