Numabilis propose à ses clients des solutions concrètes pour concevoir et réaliser des outils logiciels et web à forte valeur ajoutée. Ils répondent aux besoins de vos clients/utilisateurs dans le respect de vos objectifs commerciaux, de communication ou de productivité.

» En savoir plus...

Google Maps API : coordonnées d'un marqueur

Posté par david le 8 Juillet, 2007 - 21:55. Ingénierie web | JavaScript | Web 2.0

Ce sixième et dernier billet (pour le moment du moins) sur l'API Google Maps vous apprendra à récupérer les coordonnées d'un marqueur déplaçable.

Partons de l'exemple 6 du billet précédent. Les coordonnées sont des propriétés du marqueur qu'il suffit de récupérer à la fin d'un glisser/déposer dans la fonction createMarker :

GEvent.addListener(marker, "dragend", function() { htm = html + '<br />Lat_1 = ' + point.lat() + ' Lat_2 = ' + marker.getPoint().lat(); htm = htm + '<br />Lng_1 = ' + point.lng() + ' Lng_2 = ' + marker.getPoint().lng(); marker.openInfoWindowHtml(htm); });

Voilà ! Nous avons tout ce dont nous avons besoin pour faire un formulaire d'enregistrement de coordonnées en plus de l'affichage de marqueurs correspondants à des emplacements fournis sous forme de données JSON.

Le résultat est visible sur l'exemple 7.

Les autres billets de cette série sur l'API Google Maps :

Google Maps API : un marqueur déplaçable

Posté par david le 8 Juillet, 2007 - 18:02. Ingénierie web | JavaScript | Web 2.0

Ce cinqième billet sur l'API Google Maps vous apprendra à créer un marqueur déplaçable par simple glisser/déposer (drag and drop).

Partons de l'exemple 5 du billet précédent dont nous allons simplement modifier la fonction de création de marqueur createMarker :

function createMarker(point,html) { var icon = new GIcon(G_DEFAULT_ICON); icon.image = "http://www.numabilis.com/files/demos/google-maps/blue-dot.png"; var options = { icon: icon, draggable: true }; var marker = new GMarker(point, options); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml(html); }); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; }

Le marqueur est donc construit en passant des options au constructeur : l'URL (absolue) d'une icône (pour différencier le marqueur déplaçable des autres) et un simple booléen indiquant que le marqueur est déplaçable ! Il est également possible, comme dans cet exemple de définir des fonctions appelées au début et à la fin du déplacement.

Le résultat est visible sur l'exemple 6.

Les autres billets de cette série sur l'API Google Maps :

Google Maps API : géolocalisation (geocoding)

Posté par david le 8 Juillet, 2007 - 13:55. Ingénierie web | JavaScript | Web 2.0

Ce quatrième billet sur l'API Google Maps vous apprendra à afficher la carte d'un lieu à partir de son adresse. C'est ce que l'on nomme geocoding dans l'API, opération réalisée grâce à un objet JavaScript, le geocoder.

Partons de l'exemple 4 du billet précédent auquel nous ajoutons la variable globale geocoder. Le chargement du fichier JSON est remplacé par l'instanciation du geocoder dans la fonction load :

var geocoder; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(46.85, 1.75), 6); geocoder = new GClientGeocoder(); } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); } }

Nous ajoutons à la page un formulaire permettant la saisie de l'adresse cherchée. La validation du formulaire est interceptée par la fonction geocode qui prend en paramètre l'adresse saisie :

<form onsubmit="return geocode(this.address.value);"> Adresse : <input type="text" size="80" name="address" /> <input type="submit" value="GO" /> </form>

Cette fonction geocode, qui va faire tout le travail, est extrêmement simple :

function geocode(address) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = createMarker(point, address); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); return false; }

Elle consiste à appeler la fonction getLatLng du geocoder en lui passant en paramètre l'adresse saisie et une fonction appelée par le geocoder au retour de la requête HTTP. En cas de succès, on centre la carte sur le point correspondant à l'adresse, on créé un marqueur que l'on ajoute sur la carte et on affiche la fenêtre d'information.

Le résultat est visible sur l'exemple 5.

Les autres billets de cette série sur l'API Google Maps :

Google Maps API : affichage des données d'un fichier JSON

Posté par david le 7 Juillet, 2007 - 12:47. Ingénierie web | JavaScript | Web 2.0

Ce troisième billet sur l'API Google Maps vous apprendra à afficher des données distantes au format JSON (produites dynamiquement par un serveur par exemple). L'API peut utiliser le format XML. Je préfère cependant utiliser le format JSON, plus compact et plus rapide à traiter en JavaScript, mais aussi plus complexe.

Partons de l'exemple 3 du billet précédent dont nous supprimons la création du marqueur lors du chargement de la page (fonction load) pour la remplacer par un appel à la fonction GDownloadUrl. Cette fonction permet de charger une ressource de manière asynchrone et prends deux paramètres :

  • url : l'URL de la ressource, exemple04.json dans notre exemple.
  • onload : la fonction à appeler après le chargement de la ressource. Cette fonction doit avoir deux paramètres :
    • text : le texte du document téléchargé.
    • status : le code du statut de la réponse HTTP.
    En cas de timeout de la requête, la fonction est appelée avec null et -1 comme arguments.

Nous avons donc la fonction load suivante :

function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(46.85, 1.75), 6); GDownloadUrl("exemple04.json", setup_json); } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); } }

Notons au passage que la vairable map a été sortie de la fonction afin de la rendre globale et de pouvoir y accéder dans la fonction set_json :

setup_json = function(json, status) { var data = eval('(' + json + ')'); for (var i=0; i<data.markers.length; i++) { var point = new GLatLng(data.markers[i].lat, data.markers[i].lng); var marker = createMarker(point, data.markers[i].html); map.addOverlay(marker); } }

Le résultat est visible sur l'exemple 4.

Plus de précisions : Data in JSON files.

Les autres billets de cette série sur l'API Google Maps :