{"id":1026,"date":"2009-09-09T06:58:28","date_gmt":"2009-09-09T05:58:28","guid":{"rendered":"http:\/\/flaven.fr\/?p=1026"},"modified":"2013-09-26T06:04:23","modified_gmt":"2013-09-26T04:04:23","slug":"google-flex-buddyress-et-wordpress-interfacer-buddypress-et-google-map-api-sous-flex","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2009\/09\/google-flex-buddyress-et-wordpress-interfacer-buddypress-et-google-map-api-sous-flex\/","title":{"rendered":"Google, Flex, Buddyress et WordPress – Interfacer BuddyPress et Google Map API sous Flex"},"content":{"rendered":"

\t
\n\t<\/p>\n

\tIl s’agit de cartographier les membres d’un r\u00e9seau social g\u00e9r\u00e9 sous BuddyPress \u00e0 l’aide de Flex et de la Google Map API. Voil\u00e0 enfin une affaire s\u00e9rieuse dont il va \u00eatre question… En effet, tracer, localiser… (Espionner ?) Les personnes \u00e0 l\u2019aide de l \u2018API Google Maps ! Bref superposer la r\u00e9alit\u00e9 virtuelle \u00e0 une r\u00e9alit\u00e9 physique (forc\u00e9ment plus d\u00e9cevante !) mais les faits sont t\u00eatus a dit L\u00e9nine<\/em>, on ne peut donc d’un mani\u00e8re ou d’une autre \u00e9chapper \u00e0 notre condition de bip\u00e9die et de s\u00e9dentarit\u00e9 quoiqu\u2019en dise les chantres de la mobilit\u00e9. Comme la ch\u00e8vre, on laisse toujours des petites crottes derri\u00e8re soi fussent-elles num\u00e9riques !<\/p>\n

\tDans cet article, on va donc voir comment se servir de l’API Google Maps, l’interfacer avec une application Flex puis creuser le filon afin de trouver une piste pour brancher le tout sur un r\u00e9seau social g\u00e9r\u00e9 sous BuddyPress en s\u2019appuyant sur le champs base<\/code> du profil de l\u2019utilisateur.<\/b><\/p>\n

\tNDLR : Un propos qui n\u2019engage que son auteur, la s\u00e9dentarit\u00e9 n\u2019est-t-elle \u00e0 l\u2019origine de la culture (cf les biblioth\u00e8ques) alors que la mobilit\u00e9 physique et moderne (je ne parle pas de l\u2019errance tsigane ou des bushmen, je pense plut\u00f4t aux migrants chinois de WebDocumenaire de Samuel Bollendorff Cf http:\/\/www.lemonde.fr\/asie-pacifique\/visuel\/2008\/11\/17\/voyage-au-bout-du-charbon_1118477_3216.html<\/a> ou au monde des excit\u00e9s de la mobilit\u00e9, d\u00e9crit par Pico Iyer<\/a> dans The Global Soul: Jet Lag, Shopping Malls, and the Search for Home, qui date un peu d\u00e9sormais). Cette mobilit\u00e9, c’est bien la barbarie de l\u2019instant pr\u00e9sent :):)<\/i><\/p>\n

Pr\u00e9parer son plan google….<\/h2>\n

Obtenir une API KEY pour Google Maps<\/h4>\n

\tVous devez vous rendre sur l’url principal de l’API Google http:\/\/code.google.com\/intl\/fr\/apis\/maps\/<\/a><\/code>. Il vous suffit de donner d’ennregistrer un nom de domaine pour obtenir une cl\u00e9 pur faire fonctionner l’API google sur le site de votre choix. Dans notre exemple, voici la cl\u00e9 ABQIAAAAbr0JY20cqFgvd3EtzjX8xRTp0ByTiBsAuE4XVoEALBVYr6OMDRQpc_PC6mtqjHFWwOLDbePFpwWjAg<\/code> pour API key for
\n\themedia.net subscribed at info@hecube.net<\/code><\/p>\n

\t\"Google,<\/p>\n

\t\"Google,<\/p>\n

\n\tThank You for Signing Up for a Google Maps API Key!<\/p>\n

\tYour key is:<\/p>\n

\tABQIAAAAbr0JY20cqFgvd3EtzjX8xRTp0ByTiBsAuE4XVoEALBVYr6OMDRQpc
\n\t_PC6mtqjHFWwOLDbePFpwWjAg<\/p>\n

\tThis key is good for all URLs consisting of this registered domain (and directory if applicable):<\/p>\n

\thttp:\/\/hemedia.net\/\n\t<\/p><\/blockquote>\n

\tLa cl\u00e9 API a \u00e9t\u00e9 “scind\u00e9” afin de pouvoir tenir dans notre article.<\/em><\/p>\n

T\u00e9l\u00e9charger le fichier map_flex_1_16.swc<\/code><\/h4>\n

\tIl faut t\u00e9l\u00e9charger le “couteau suisse” donn\u00e9e par google pour int\u00e9grer l’API Google Map dans Flex. http:\/\/maps.googleapis.com\/maps\/flash\/release\/sdk.zip<\/a><\/code>
\n\tCe fichier va permettre de faire appel au sein de Flex aux propri\u00e9t\u00e9s de l’API Google<\/b><\/p>\n

Conna\u00eetre les coordonn\u00e9es g\u00e9ographiques d’un lieu (latitude et longitude)<\/h4>\n

\tAvant d’interfacer notre application Flex avec la BDD de donn\u00e9es. Celle-ci doit contenir les coordonn\u00e9es g\u00e9ographiques (latitude et longitude) d’un lieu mais il faut pouvoir d\u00e9terminer ces coordonn\u00e9es.<\/p>\n

\tLe code source du fichier pour obtenir les coordonn\u00e9es g\u00e9ographiques d’un lieu google_api_coord_hecube.html<\/code>. On a plac\u00e9 quelques remarques en commentaires dans le code pour comprendre un peu mieux les \u00e9l\u00e9ments importants du code.<\/b><\/p>\n

\t\"Google,<\/p>\n

\r\n\t\t<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd">\r\n\t\t<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n\t\t<head>\r\n\t\t\t<meta http-equiv="content-type" content="text\/html; charset=UTF-8"\/>\r\n\t\t\t<title>Hecube.net _ Google Map - Trouver les coordonnées géographiques (latitude et longitude) d'un lieu<\/title>\r\n\t\t\t<!-- La Google Maps API Key vient dans la balise script -->\r\n\t\t\t<script src="http:\/\/maps.google.com\/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAbr0JY20cqFgvd3EtzjX8xRRi_j0U6kJrkFvY4-OX2XYmEAa76BQRTZkoVHkXJUpOizoXkhUFxW1L6Q" type="text\/javascript"><\/script>\r\n\t\t\t<script type="text\/javascript">\r\n\t\t\t\/\/<![CDATA[\r\n\r\n\t\t\tvar map = null;\r\n\t\t\tvar geocoder = null;\r\n\r\n\t\t\tfunction showAddress(address) {\r\n\t\t\t\tif (geocoder) {\r\n\t\t\t\t\tgeocoder.getLatLng( \r\n\t\t\t\t\t\taddress, \r\n\t\t\t\t\t\tfunction(point) {\r\n\t\t\t\t\t\t\tif (!point) { alert(address + " not found"); } \r\n\t\t\t\t\t\t\telse { \r\n\t\t\t\t\t\t\t\t\/* La valeur setCenter est apparament comprise entre 1 -> 23, ils'agit du zoom sur la carte *\/\r\n\t\t\t\t\t\t\t\tmap.setCenter(point, 16);\r\n\t\t\t\t\t\t\t\tmap.addControl(new GLargeMapControl());\r\n\t\t\t\t\t\t\t\tmap.addControl(new GMapTypeControl());\r\n\t\t\t\t\t\t\t\t\/* G_HYBRID_MAP => photo ou G_HYBRID_TYPE => carte *\/\r\n\t\t\t\t\t\t\t\tmap.setMapType( G_HYBRID_MAP );  \r\n\t\t\t\t\t\t\t\tmap.addControl(new GScaleControl());\r\n\t\t\t\t\t\t\t\tmap.addControl(new GOverviewMapControl());\r\n\t\t\t\t\t\t\t\tmap.enableDoubleClickZoom();\r\n\t\t\t\t\t\t\t\tdocument.getElementById("latLng").innerHTML="<p>Latitude and Longitude: <font color="red">" + point + "<\/font><\/p>"\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tfunction load() {\r\n\t\t\t\t\/* Lieu chargé par défaut lors du chargement de la page *\/\r\n\t\t\t\tvar address="Paris"\r\n\t\t\t\tif (GBrowserIsCompatible()) {\r\n\t\t\t\t\tmap = new GMap2(document.getElementById("map"));\r\n\t\t\t\t\tgeocoder = new GClientGeocoder();\r\n\t\t\t\t\tshowAddress(address);\r\n\t\t\t\t\tdocument.getElementById("address").value=address\r\n\r\n\t\t\t\t\t\/\/ Trigger for moveend event\r\n\t\t\t\t\tGEvent.addListener(\r\n\t\t\t\t\t\tmap, 'moveend', \r\n\t\t\t\t\t\tfunction() {\r\n\t\t\t\t\t\t\t\/\/ Display current map center\r\n\t\t\t\t\t\t\tdocument.getElementById("latLng").innerHTML="<p>Latitude and Longitude: <font color="red">" + map.getCenter() + "<\/font><\/p>"\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t) \r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t\/\/]]>\r\n\t\t\t<\/script>\r\n\t\t<\/head>\r\n\r\n\t\t<body onload="load()" onunload="GUnload()">\r\n\r\n\t\t\t<form action="#" onsubmit="showAddress(this.address.value); return false">\r\n\t\t\t\t<p>Pour trouver les coordonnées géographiques (latitude et longitude) d'un lieu, il vous suffit de taper le nom du lieu (ville, village...etc.)<\/p>\r\n\t\t\t\t\t\t<p><i>Il peut exister quelques "ratés", en effet certains lieux peuvent ne pas être localisés !<\/i><\/p> \r\n\t\t\t\t<p>\r\n\t\t\t\t\t<input type="text" size="60" name="address" id="address" value="" \/>\r\n\t\t\t\t\t<input type="submit" value="Go!" \/>\r\n\r\n\t\t\t\t<\/p>\r\n\t\t\t\t<div id="latLng"><\/div>\r\n\t\t\t\t<div id="map" style="width: 800px; height: 480px"><\/div>\r\n\t\t\t<\/form>\r\n\r\n\r\n\t\t<\/body>\r\n\t\t<\/html>\r\n\t<\/pre>\n
La structure la BDD qui va stocker les coordonn\u00e9es g\u00e9ographiques<\/h4>\n
\tLe fichier “dump” .sql<\/code> pour la creation de la BDD qui va \u00eatre interfac\u00e9 avec notre application Flex via un fichier de g\u00e9n\u00e9ration de xml \u00e9crit en php<\/code><\/p>\n
\tNous travaillons en local \u00e0 l’aide d’un serveur MAMP. Pour installer un environnement similaire reportez-vous aux articles suivants de ce blog :<\/b><\/p>\n
\tPour comprendre comment installer cet environnement PHP-MySQL, reportez-vous aux articles de ce blog\u00a0:<\/p>\n