caractère accentué avec json_encode malgré que tout soit en utf8
Bonjour ,
je ne sais pas si c'est le bon forum pour poser ma question mais comme il y'a du jquery..
voila , j'ai suivi ce très bon tuto
"Afficher des markers via une base de données mysql sur une carte en utilisant Google Maps API, JavaScript et PHP"
http://www.domagojsalopek.com/Detail...API-and-PHP/22
ça tourne bien , pas de problème, sauf que lorsque j'ai un accent sur un des caractères stocké dans l'un des champs de ma table, il me renvoie comme valeur "null". alors que pour les champs ou il n'ya pas d'accent cela affiche dans l'infobulle de la carte google le bon texte.
je sais que jquery et json ne fonctionne qu'avec de l'utf8 et donc ma base de donnée et mes tables sont en utf8
dans ma connexion à la base j'ai fait un "SET NAMES utf8"
mes pages sont en charset utf8 , j'ai ajouté un
Code:
header('Content-Type: text/html; charset=utf-8');
pour forcer le tout on sait jamais
bref je suis partout en utf8 mais rien à faire json_encode me renvois toujours la valeur "null"
voici les codes
le sql
Code:
1
2
3
4
5
6
7
8
9
10
| CREATE TABLE `locations` (
`id` INT(10) NOT NULL AUTO_INCREMENT,
`name` VARCHAR(150) NOT NULL,
`address` VARCHAR(255) NOT NULL,
`lat` FLOAT(10,6) NOT NULL,
`lon` FLOAT(10,6) NOT NULL,
`description` TEXT NOT NULL,
PRIMARY KEY (`id`)
)
COLLATE='utf8_general_ci' |
le javascript
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
| function makeRequest(url, callback) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
} else {
request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
}
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request);
}
}
request.open("POST", url, true);
request.send();
}
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function init() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
makeRequest('get_locations.php', function(data) {
var data = JSON.parse(data.responseText);
for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
}
});
}
function displayLocation(location) {
var content = '<div ><strong>' + location.name + '</strong>'
+ '<br/>' + location.address
+ '<br/>' + location.description + '</div>';
if (parseInt(location.lat) == 0) {
geocoder.geocode( { 'address': location.address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: location.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
}
});
} else {
var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon));
var marker = new google.maps.Marker({
map: map,
position: position,
title: location.name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
}
} |
le php qui gère l'affichage des données stockés dans la table avec un json_encode
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <?php
require 'config.php';
try {
$db = new PDO($dsn, $username, $password);
$db->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$sth = $db->query("SELECT * FROM locations");
$locations = $sth->fetchAll();
echo json_encode( $locations );
} catch (Exception $e) {
echo $e->getMessage();
} |
et l'html qui affiche la map google
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Google Maps Example</title>
<style type="text/css">
body { font: normal 14px Verdana; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
#sidebar { float: right; width: 30%; }
#main { padding-right: 15px; }
.infoWindow { width: 220px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var map;
// Chichilianne is back in town
var center = new google.maps.LatLng(44.817159,5.571728);
function init() {
var mapOptions = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: center,
});
}
//]]>
</script>
</head>
<body onload="init();">
<section id="main">
<div id="map_canvas" style="width: 70%; height: 500px;"></div>
</section>
</body>
</html> |
si quelqu'un a une piste car je ne suis dans le brouillard le plus épais pour faire tourner ce tuto avec des données textes en français et nos merveilleux caractère "ééé" et autre" ààà".
merci
