Chargement ajax du contenu au clic sur marqueur Google Maps V3
vince240986
Messages postés6Date d'inscriptionlundi 15 octobre 2007StatutMembreDernière intervention11 avril 2014
-
15 mars 2011 à 13:35
vince240986
Messages postés6Date d'inscriptionlundi 15 octobre 2007StatutMembreDernière intervention11 avril 2014
-
19 mars 2011 à 11:44
Bonjour,
Voilà plusieurs jours que je bloque sur la création d'une fonction.
L'idée est la suivante, j'ai crée une appli avec une base de données et back office pour alimenter cette dernière.
En front office tout va bien, les marqueurs apparaissent correctement et le contenu de l'infobulle est présent aussi.
Toutefois, je souhaiterais qu'à la place de cette infobulle, au clic sur le marqueur, apparaisse le contenu sous la carte en Ajax (pour pouvoir recharger les informations dynamiquement en cliquant sur chaque marqueur).
Alors j'ai lu des quantités de posts, des bouquins mais je ne parviens pas au résultat escompté (voici un exemple sous cakephp de ce que je souhaite faire, sans passer pour autant par ce framework: http://www.grafikart.fr/tutoriels/google-maps-api-141).
Merci par avance à quiconque m'apportera son aide.
Voici le code source de mon fichier index.php:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="admin/style.css" />
<title>Test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function createXmlHttpRequest() {
try {
if (typeof ActiveXObject != 'undefined') {
return new ActiveXObject('Microsoft.XMLHTTP');
} else if (window["XMLHttpRequest"]) {
return new XMLHttpRequest();
}
} catch (e) {
changeStatus(e);
}
return null;
};
function downloadUrl(url, callback) {
var status = -1;
var request = createXmlHttpRequest();
if (!request) {
return false;
}
request.onreadystatechange = function() {
if (request.readyState == 4) {
try {
status = request.status;
} catch (e) {
}
if (status == 200) {
callback(request.responseText, request.status);
request.onreadystatechange = function() {};
}
}
}
request.open('GET', url, true);
try {
request.send(null);
} catch (e) {
changeStatus(e);
}
};
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
var map;
function initialize() {
var latlng = new google.maps.LatLng(46.7, 2.5);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
downloadUrl("getPoi.php", function(data) {
var xml = xmlParse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
createMarker(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute('titre'), markers[i].getAttribute('description'));
}
});
}
function createMarker(lat, lng, titre, description){
var latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: titre
});
var infobulle = new google.maps.InfoWindow({
content: description
});
google.maps.event.addListener(marker, 'click', function(){
infobulle.open(map, marker);
});
}
</script>
</head>
Ici le contenu dynamique doit apparaitre
</html>