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
pour forcer le tout on sait jamais
Code : Sélectionner tout - Visualiser dans une fenêtre à part header('Content-Type: text/html; charset=utf-8');
bref je suis partout en utf8 mais rien à faire json_encode me renvois toujours la valeur "null"
voici les codes
le sql
le javascript
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 php qui gère l'affichage des données stockés dans la table avec un json_encode
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 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); }); } }
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 <?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
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" ààà".
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 <!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>
merci
Partager