Bonjour
Je cherche à afficher les marqueurs sur ma carte google maps. J'ai une base de données dans laquelle sont stockés les coordonnées de mes points de marqueurs. J'arrive à afficher la carte mais pas les marqueurs. Voici mes codes et fichier, merci de votre aide:
index-map.php :
index-map-ajax.php :
Je cherche à afficher les marqueurs sur ma carte google maps. J'ai une base de données dans laquelle sont stockés les coordonnées de mes points de marqueurs. J'arrive à afficher la carte mais pas les marqueurs. Voici mes codes et fichier, merci de votre aide:
index-map.php :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 400px;
width: 700px;
margin:50px auto;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
$(document).ready( function () {
// Paramétrage des marqueurs
var pinColor = "29aec3";// couleur des épingles google MAP
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
function initialiser() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(48,2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// Récupération en AJAX des données des lieux à épingler sur la carte Google map
$.ajax({
url : 'index-map-ajax.php',
error : function(request, error) { // Info Debuggage si erreur
alert("Erreur sous genre - responseText: "+request.responseText);
},
dataType : "json",
success : function(data){
$("#map_canvas").fadeIn('slow');
var infowindow = new google.maps.InfoWindow();
var marker, i;
// Parcours des données reçus depuis le fichier index-map-ajax.php
// Récupération de LatLng, Hint et Legende de chaque lieu et création d'un marqueur
$.each(data.items, function(i,item){
if (item) {
if (item.LatLng_lieu!=''){
// On sépare la latitude et la longitude
var strLatLng = item.LatLng_lieu.split(',');
marker = new google.maps.Marker({
position : new google.maps.LatLng(strLatLng[0], strLatLng[1]),
map : map_canvas,
icon : pinImage,
shadow : pinShadow,
title : item.Titre_lieu
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
// Affichage de la légende de chaque lieu
infowindow.setContent('<a target="_blank" href="'+item.Url_lieu+'"><br/>'+item.Titre_lieu+' </a> ');
infowindow.open(map_canvas, marker);
}
})(marker, i)); }
//alert('Vérification données reçues '+item.Titre_lieu+' -- '+item.Url_lieu+ ' -- '+item.LatLng_lieu);
}
});
}
});
}initialiser();
})
</script>
</head>
<body onload="initialiser()">
<div id="map_canvas"></div>
</body>
</html>index-map-ajax.php :
<html>
<?php
// Accès à la base de données
$serveur = "localhost";
$utilisateur = "root";
$motDePasse = " ";
$base = "geolocalisation";
mysql_connect($serveur, $utilisateur, $motDePasse);
mysql_select_db($base) or die("Base de données inactive. ");
// $items est la chaîne contenant l'objet JSON des données
$items = '';
// Parcours des lieux
$result = mysql_query("SELECT* FROM lieux ");
WHILE ($row = mysql_fetch_object($result)) {
// Ecriture des données sous format JSON
$items .= <<<EOD
{ "LatLng_lieu" : "$row->latlng_lieu",
"Titre_lieu" : "$row->titre_lieu",
"Url_lieu" : "$row->url_lieu"},
EOD;
}
mysql_free_result($result);
// On enlève la dernière virgule
if ($items != ''){
$items = substr($items, 0, -1);
}
// Ecriture de la liste des lieux en format JSON
header('Content-type: application/json');
?>
{
"items": [
<?php echo $items;?>
]
}
</html>