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), comme c'est le cas sur le tuto avec cakephp, sauf que là je ne passe pas par ce framework. Merci par avance à quiconque m'apportera son aide. Voici le code source de mon fichier index.php: [code]

<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.getAttribute("lat")), parseFloat(markers.getAttribute("lng")), markers.getAttribute('titre'), markers.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>

Ici le contenu dynamique doit apparaitre
[/code]

1 réponse


vince240986
Auteur
Réponse acceptée

problème résolu! [code]

<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="css/style.css"><title>Test</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script><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.getAttribute("lat")), parseFloat(markers.getAttribute("lng")), markers.getAttribute('titre'), markers.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: titre
});

google.maps.event.addListener(marker, 'click', function(event) {
$('#content_map').html(<?php echo 'description' ?>);
infobulle.open(map, marker);
});

}

</script>

contenu left

Détails

[/code]