Discussion :

[serna]

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 :

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

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 :

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 javascript

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);
        });
    }
}

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
<?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 :

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>

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

[SpaceFrog]

Points à vérifier :

le fichier lui même est il en utf8 sasn BOM ?
as tu mis un header php charset utf8 ?
as tu mis un setnames sur la connexion à la bdd ?

[serna]

bonsoir,

oui tout est en utf8 , page enregistré en utf8 sans bom,
header php charset utf8 ,
et setname utf8 sur la connexion
database en ut8, table en utf8

je suis en localhost ( wamp )

Version de Apache: 2.2.11
Version de PHP: 5.3.0
Version de MySQL: 5.1.36
Jeu de caractères pour MySQL: UTF-8 Unicode (utf8)

le script du tuto cité plus haut fonctionne parfaitement à cette exception prés que pour les champs qui ont des caractères accentués cela affiche "nul"

[Michaeljackfan]

Salut, as-tu essayé comme ceci :

Code :

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

1
2
3
	$db = new PDO($dsn, $username, $password);
        $db->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
	$db->exec("SET CHARACTER SET utf8");

J'avais eu un problème d'encodage en UTF8 assez similaire au tiens, et cette ligne supplémentaire l'a résolu.

[SpaceFrog]

si tu es sur un serveur apache as tu verifié le default charset dans le http conf

[serna]

un grand merci SpaceFrog pour m'avoir donné la solution

en ajoutant comme tu me l'a indiqué cette ligne

Code :

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

$db->exec("SET CHARACTER SET utf8");

ça fonctionne parfaitement, les textes avec accents sont correctement affichés.

je pensais qu'avec

Code :

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

$db->query("SET NAMES utf8");

dans mon fichier de connexion ça serait suffisant mais en fait non

encore merci