Je veux devenir mon propre patron

Ma problématique de ce WE était d’offrir le moyen aux utilisateurs d’associer des informations à des évènements. Ces informations peuvent être du texte ou une carte Google Maps. La saisie de texte, c’est basique : <textarea></textarea>. Mais pour une carte Google Maps, c’est un peu plus subtil.

Je ne peux pas proposer de saisir les coordonnées à la main. Non, il faut que les utilisateurs déplacent eux-mêmes la Google Map et qu’ensuite je récupère les paramètres de cette carte, qui sont dans mon cas la latitude et la longitude du centre de la carte et le niveau de zoom, pour les sauvegarder. Et avec l’API Google Maps, c’est finalement assez simple.

La map se place dans un div, suivi dans champ input hidden, qui contient les paramètres :

<div class="map" id="map_'.$i.'"></div>
<input id="content-'.$i.'" name="content-'.$i.'" type="hidden" value="" />


Puis, j’initialise chaque map de la page par la méthode suivante :

function newMap(rowId, lat, lng, zoom) {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_"+rowId));
map.setCenter(new GLatLng(lat, lng), zoom);
// Ajout des contrôles ou autres paramètres
GEvent.addListener(map, "moveend", function() {
$("#content-"+rowId).val(map.getCenter().lat()+"|"+map.getCenter().lng()+"|"+map.getZoom());
});
}
}


Le listener associé à la map se déclenche en fin de déplacement (‘moveend‘), et récupère alors les paramètres (map.getCenter().lat()) pour les placer dans le champ hidden associé ($(‘#content-’+rowId).val(…)).

Avec un poil de jQuery (qui me séduit de plus en plus), c’est vraiment simple de faire des choses sympas. La preuve.