Articles

[GoogleMAP API] Afficher les éléments d'une recherche geocode

10/2009

+ Commenter cet article

Sur GoogleMAP il est possible d'utiliser le GeoCoder pour rechercher une adresse sur la carte. Un Geocoder fournit non seulement la longitude et la latitude mais également l’adresse telle qu’elle est orthographiée dans la base de donnée.
Dans un premier temps, il faut initialiser le geocoder :

var geocoder = new GClientGeocoder();


Ensuite, on fait l'appel au geocoder pour trouver les points qui correspondent à une adresse donnée :

geocoder.getLocations('Paris nation', resultCallback);


On fait l'appel ici à la méthode resultCallback qui va être appelée lorsque le serveur aura répondu :

function resultCallback(response) {

	// Supprimer les marqueurs sur la carte
	map.clearOverlays();

	if (!response || response.Status.code != 200) {
		// En cas d'erreur ou si il n'y a aucun résultat
		alert('Aucun résultat');
	}
	else {

		// Si il n'y a qu'un point, on centre la carte directement
		if (response.Placemark.length == 1) {
			map.setCenter(new GLatLng(
				response.Placemark[0].Point.coordinates[1],
				response.Placemark[0].Point.coordinates[0]
			));
			return;
		}

		// On prépare un objet Bounds qui corresponds à la zone occupée
		// par tous les points retournés par le geocoder.
		var bounds = new GLatLngBounds();

		// On boucle sur tous les points retournés
		for (var i = 0; i < response.Placemark.length; i++) {

			// Cet objet correspond au point actuel
			var p = response.Placemark[i];

			// Cet objet correspond à l'emplacement géographique du point
			var point = new GLatLng(
				p.Point.coordinates[1],
				p.Point.coordinates[0]
			);

			// On ajoute le point aux Bounds
			bounds.extend(point);

			// On fabrique un marqueur pour ce point
			var marker = new GMarker(point);
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(p.address);
			});

			// On affiche le point sur la carte
			map.addOverlay(marker);
		}

		// On centre la carte sur zone occupée par tous les points, et on adapte
		// le niveau de zoom
		map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
		
	}
}

Google MAP API, GLatLngBounds, GLatLng, GMarker, fit-to-bounds zoom, GClientGeocoder, geocoder search, adapter le zoom de la carte aux résultats de la recherche, centrer la carte pour adapter la vue aux résultats de la recherche, fit map bounds to search result

[jQuery UI] Draggable/Droppable : comment obtenir les éléments drag et drop

10/2009

+ Commenter cet article

J'ai fouillé longtemps dans la documentation de jQuery UI pour savoir comment faire en sorte - avec le module draggable/droppable - de récupérer l'élément qui est déplacé (drag) et celui où on relâche la souris (drop). La doc est vachement incomplète de ce coté je vais donc vous l'expliquer :

Si je reprends le "super" exemple de cette page, il est expliqué comment obtenir l'élément qui réception l'autre (le drop) mais pas le drag. Je n'explique pas ici comment mettre en place le drag/drop, sachez néanmoins que l'élément qui est déplacé c'est le drag, et celui qui reçoit c'est le drop.

$('.drag').draggable({ helper: 'clone' });
$(".drop").droppable({
	accept: ".drag",
	hoverClass: 'droppable-hover',
	drop: function(event, ui) {
		var drop = $(this);
		var drag = $(ui.draggable[0]);

		// votre code ici
	}
});

jquery, jquery ui, drag drop, draggable, droppable, get id, ui.draggable, obtenir élément déplacé en mouvement, getDropElement, getDragElement