Google Maps V3

Chargement ajax du contenu au clic sur marqueur

Sujet résolu

15 mars 2011 à 13:57:30

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>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="content_map">
Ici le contenu dynamique doit apparaitre
</div>
</body>
</html>

Golmote

15 mars 2011 à 19:33:37

Je cherche mais je ne vois pas où est ta tentative ?

Vince240986

16 mars 2011 à 16:57:53

Le souci c'est que je ne sais pas trop par où commencer pour réaliser cela (j'ai trouvé un script ici http://www.dougv.com/demo/ajax_google_maps_detaildiv/, mais c'est pour la V2 et là honnêtement cela dépasse mes compétences pour l'adapter à mon code)! Côté PHP ca va mais côté JS j'ai du mal

Golmote

16 mars 2011 à 19:24:35

Si tu n'essayes pas, personne ne le fera à ta place (enfin si, peut-être, mais ce ne sera pas moi).

Essaye au moins.

Sinon, recrute.
http://www.siteduzero.com/forum-81-200 [...] -projets.html

Vince240986

16 mars 2011 à 19:42:24

Bonsoir,
alors l'idée n'est pas d'avoir une réponse toute faite mais une piste pour m'aiguiller et ensuite me débrouiller seul, voilà tout. Les classes utilisées sur la V2 étant obsolètes c'était là ma problématique.

Vince240986

19 mars 2011 à 11:33:29

Voici le résultat final, dans l'éventualité où quelqu'un cherche quelque chose de similaire, le tout est basé sur le tuto php mysql v3 de l'api google maps.

<!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="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[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: titre
  });

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

 }

</script>
</head>
<body onload="initialize()">
 <div id="page">
 <div id="dpt">
 contenu left
 </div>
 <div id="map_canvas"></div>
 <div id="content_map">
Détails
 </div>
 </div>
</body>
</html>

Google Maps V3

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Google Maps V3

Chargement ajax du contenu au clic sur marqueur

Google Maps V3

Supprimer

Modérer

Signaler le message aux modérateurs