Novembre 2007
Objectif
Le Web regorge de communautés centrées sur des zones géographiques et des centres d'intérêt : les amateurs de musées, de cathédrales européennes, de parcs nationaux, etc. Il y a donc toujours besoin d'un développeur (comme vous !) pour créer un système permettant aux utilisateurs d'ajouter des lieux géolocalisés à une carte. C'est exactement ce que nous allons faire ici. À la fin de cet article, vous disposerez d'un système permettant aux utilisateurs de s'inscrire, de se connecter et d'ajouter des lieux géolocalisés. Le système utilisera AJAX pour le frontend, PHP pour les scripts côté serveur et Google Sheets pour le stockage. Si vous avez l'habitude d'utiliser des bases de données MySQL pour le stockage, vous pouvez facilement modifier le code ici pour utiliser un backend de base de données MySQL à la place.
Cet article est divisé en plusieurs étapes :
- Configurer la feuille de calcul
- Utiliser le framework Zend Gdata
- Créer des fonctions globales
- Enregistrer un nouvel utilisateur
- Connexion d'un utilisateur
- Autoriser les utilisateurs à ajouter des lieux sur la carte
- Créer la carte
- Conclusion
Configurer la feuille de calcul
Nous utiliserons Google Sheets pour stocker toutes les données de ce système. Nous devons stocker deux types de données : les informations de compte utilisateur et les lieux ajoutés par les utilisateurs. Nous allons donc créer une feuille de calcul pour chaque type de données. Nous allons interagir avec les feuilles de calcul à l'aide de leur flux de liste, qui repose sur la première ligne d'une feuille de calcul contenant les libellés de colonne et chaque ligne suivante contenant des données.
Accédez à docs.google.com et créez une feuille de calcul. Renommez la feuille de calcul par défaut "Utilisateurs", puis créez des colonnes nommées "user", "password" et "session". Ajoutez ensuite une autre feuille, renommez-la "Locations" et créez des colonnes nommées "user", "status", "lat", "lng" et "date". Si vous ne souhaitez pas effectuer tout ce travail manuel, téléchargez ce modèle et importez-le dans Google Sheets à l'aide de la commande Fichier > Importer.
Les informations du compte utilisateur doivent rester privées (seul le propriétaire de la feuille de calcul peut les voir), tandis que les lieux ajoutés par l'utilisateur seront affichés sur une carte visible par tous. Heureusement, Google Sheets vous permet de choisir les feuilles de calcul qui peuvent être publiques et celles qui doivent rester privées (par défaut). Pour publier la feuille de calcul "Emplacements", cliquez sur l'onglet "Publier", puis sur "Publier maintenant". Cochez la case "Republier automatiquement", puis dans le menu déroulant "Quelles parties ?", sélectionnez "Feuille 'Emplacements' uniquement". Les options correctes sont indiquées dans la capture d'écran ci-dessous :
Utiliser le framework Zend GData
L'API Google Sheets fournit une interface HTTP pour les opérations CRUD (création, lecture, mise à jour et suppression), comme la récupération, l'insertion, la mise à jour et la suppression de lignes. Zend Framework fournit un wrapper PHP au-dessus de l'API (et des autres API GData) pour que vous n'ayez pas à vous soucier de l'implémentation des opérations HTTP brutes. Le framework Zend nécessite PHP 5.
Si vous ne l'avez pas encore fait, téléchargez le framework Zend et importez-le sur votre serveur. Le framework est disponible à l'adresse suivante : http://framework.zend.com/download/gdata.
Vous devez modifier votre PHP include_path pour inclure la bibliothèque Zend. Il existe plusieurs façons de procéder, en fonction du niveau de droits d'administration dont vous disposez sur votre serveur. Pour ce faire, ajoutez cette ligne au-dessus des instructions "require" dans tous les fichiers PHP utilisant la bibliothèque :
ini_set("include_path", ".:/usr/lib/php:/usr/local/lib/php:../../../library/");
Pour le tester, exécutez la démo Spreadsheets en saisissant la commande suivante sur la ligne de commande dans le dossier demos/Zend/Gdata :
php Spreadsheet-ClientLogin.php --user=YourGMailUsername --pass=YourPassword
Si cela fonctionne, une liste de vos feuilles de calcul devrait s'afficher. Si vous rencontrez une erreur, vérifiez que votre chemin d'inclusion est correctement défini et que PHP 5 est installé.
Créer des fonctions globales
Tous les scripts PHP que nous allons écrire pour la carte de la communauté utiliseront des inclusions, des variables et des fonctions communes, que nous placerons dans un seul fichier.
Au début du fichier, nous aurons les instructions nécessaires pour inclure et charger la bibliothèque Zend, tirées de l'exemple Spreadsheets-ClientLogin.php.
Nous allons ensuite définir les constantes qui seront utilisées dans les fichiers : la clé de la feuille de calcul et les deux ID de feuille de calcul. Pour trouver les informations concernant votre feuille de calcul, ouvrez-la, cliquez sur l'onglet "Publier", puis sur "Plus d'options de publication". Sélectionnez "ATOM" dans la liste déroulante "Format de fichier", puis cliquez sur "Générer l'URL". Vous devriez obtenir un résultat semblable au suivant :
http://spreadsheets.google.com/feeds/list/o16162288751915453340.4016005092390554215/od6/public/basic
La clé de la feuille de calcul est la longue chaîne alphanumérique qui suit "/list/", et l'ID de la feuille de calcul est la chaîne de trois caractères qui suit. Pour trouver l'ID de l'autre feuille de calcul, sélectionnez-la dans le menu déroulant "Quelles feuilles ?".
Nous allons ensuite créer trois fonctions : setupClient, getWkshtListFeed et printFeed. Dans setupClient, nous allons définir notre nom d'utilisateur et notre mot de passe Gmail, nous authentifier avec ClientLogin et renvoyer un objet Zend_Gdata_Spreadsheets. Dans getWkshtListFeed, nous renverrons un flux de liste de feuilles de calcul pour une clé de feuille de calcul et un ID de feuille de calcul donnés, avec une requête de feuille de calcul facultative (lien). La fonction printFeed est extraite de l'exemple Spreadsheets-ClientLogin.php et peut vous être utile pour le débogage. Il prendra un objet de flux et l'affichera à l'écran.
Le code PHP qui effectue cette opération est indiqué ci-dessous (communitymap_globals.php) :
<?php
ini_set("include_path", ".:/usr/lib/php:/usr/local/lib/php:../../../library/");
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
Zend_Loader::loadClass('Zend_Gdata_Spreadsheets');
Zend_Loader::loadClass('Zend_Http_Client');
define("SPREADSHEET_KEY", "o16162288751915453340.4016005092390554215");
define("USER_WORKSHEET_ID", "od6");
define("LOC_WORKSHEET_ID", "od7");
function setupClient() {
$email = "your.name@gmail.com";
$password = "yourPassword";
$client = Zend_Gdata_ClientLogin::getHttpClient($email, $password,
Zend_Gdata_Spreadsheets::AUTH_SERVICE_NAME);
$gdClient = new Zend_Gdata_Spreadsheets($client);
return $gdClient;
}
function getWkshtListFeed($gdClient, $ssKey, $wkshtId, $queryString=null) {
$query = new Zend_Gdata_Spreadsheets_ListQuery();
$query->setSpreadsheetKey($ssKey);
$query->setWorksheetId($wkshtId);
if ($queryString !== null) {
$query->setSpreadsheetQuery($queryString);
}
$listFeed = $gdClient->getListFeed($query);
return $listFeed;
}
function printFeed($feed)
{
print "printing feed";
$i = 0;
foreach($feed->entries as $entry) {
if ($entry instanceof Zend_Gdata_Spreadsheets_CellEntry) {
print $entry->title->text .' '. $entry->content->text . "\n";
} else if ($entry instanceof Zend_Gdata_Spreadsheets_ListEntry) {
print $i .' '. $entry->title->text .' '. $entry->content->text . "\n";
} else {
print $i .' '. $entry->title->text . "\n";
}
$i++;
}
}
?>
Enregistrer un nouvel utilisateur
Pour enregistrer un nouvel utilisateur, nous avons besoin d'une page HTML visible par l'utilisateur avec des champs de texte et un bouton d'envoi, ainsi que d'un script backend PHP pour ajouter l'utilisateur à la feuille de calcul.
Dans le script PHP, nous incluons d'abord le script global, puis nous récupérons les valeurs du nom d'utilisateur et du mot de passe à partir de la variable GET. Nous configurons ensuite un client Spreadsheets et demandons le flux de liste pour la feuille de calcul des utilisateurs avec une chaîne de requête afin de limiter les résultats aux lignes où la colonne "Nom d'utilisateur" est égale au nom d'utilisateur transmis au script. Si nous n'obtenons aucune ligne dans le résultat du flux de liste, nous pouvons continuer en toute sécurité en sachant que le nom d'utilisateur transmis est unique. Avant d'insérer une ligne dans le flux de liste, nous créons un tableau associatif des valeurs de colonne : le nom d'utilisateur, un chiffrement du mot de passe à l'aide de la fonction sha1 de PHP et un caractère de remplissage pour la session. Nous appelons ensuite insertRow sur le client de feuilles de calcul, en transmettant le tableau associatif, la clé de feuille de calcul et l'ID de feuille de calcul. Si l'objet renvoyé est un ListFeedEntry, nous affichons un message de réussite.
Le code PHP qui effectue cette opération est indiqué ci-dessous (communitymap_newuser.php) :
<?php
require_once 'communitymap_globals.php';
$username = $_GET['username'];
$password = $_GET['password'];
$gdClient = setupClient();
$listFeed = getWkshtListFeed($gdClient, SPREADSHEET_KEY, USER_WORKSHEET_ID, ('user='.$username));
$totalResults = $listFeed->totalResults;
if ( $totalResults != "0") {
// Username already exists
exit;
}
$rowArray["user"] = $username;
$rowArray["password"] = sha1($password);
$rowArray["session"] = "a";
$entry = $gdClient->insertRow($rowArray, SPREADSHEET_KEY, USER_WORKSHEET_ID);
if ($entry instanceof Zend_Gdata_Spreadsheets_ListEntry) {
echo "Success!";
}
?>
Sur la page d'inscription, nous pouvons inclure l'API Maps afin de pouvoir utiliser sa fonction wrapper XMLHttpRequest appelée GDownloadUrl. Lorsque l'utilisateur clique sur le bouton d'envoi, nous récupérons le nom d'utilisateur et le mot de passe à partir des champs de texte, construisons une chaîne de paramètres à partir de leurs valeurs et appelons GDownloadUrl sur l'URL et les paramètres du script. Étant donné que nous envoyons des informations sensibles, nous utilisons la version HTTP POST de GDownloadUrl (en envoyant les paramètres en tant que troisième argument au lieu de les ajouter à l'URL). Dans la fonction de rappel, nous allons vérifier si la réponse est correcte et afficher un message approprié à l'utilisateur.
Vous trouverez ci-dessous une capture d'écran et le code d'un exemple de page d'inscription (communitymap_register.htm) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Community Map - Register/Login </title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdef"
type="text/javascript"></script>
<script type="text/javascript">
function register() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var url = "communitymap_newuser.php?";
var params = "username=" + username + "&password=" + password;
GDownloadUrl(url, function(data, responseCode) {
if (data.length > 1) {
document.getElementById("message").innerHTML = "Successfully registered." +
"<a href='communitymap_login.htm'>Proceed to Login</a>.";
} else {
document.getElementById("message").innerHTML = "Username already exists. Try again.";
}
}, params);
}
</script>
</head>
<body>
<h1>Register for Community Map</h1>
<input type="text" id="username">
<input type="password" id="password">
<input type="button" onclick="register()" value="Register">
<div id="message"></div>
</body>
</html>
Connexion d'un utilisateur
Pour permettre aux utilisateurs de se connecter à notre système, nous avons besoin d'une page HTML visible par l'utilisateur pour lui demander son nom d'utilisateur et son mot de passe, ainsi que d'un script PHP pour vérifier les informations de connexion, créer un ID de session et le renvoyer à la page de connexion pour définir un cookie. L'utilisateur restera connecté grâce au cookie de session sur les pages suivantes.
Dans le script PHP, nous incluons d'abord le script global, puis nous récupérons les valeurs du nom d'utilisateur et du mot de passe à partir de la variable GET. Nous configurons ensuite un client Spreadsheets et demandons le flux de liste pour la feuille de calcul des utilisateurs avec une chaîne de requête afin de limiter les résultats aux lignes où la colonne "Nom d'utilisateur" est égale au nom d'utilisateur transmis au script.
Dans la ligne renvoyée, nous vérifierons que le hachage du mot de passe transmis correspond à celui stocké dans la feuille de calcul. Si tel est le cas, nous créerons un ID de session à l'aide des fonctions md5, uniqid et rand. Nous mettrons ensuite à jour la ligne de la feuille de calcul avec la session et l'afficherons à l'écran si la mise à jour de la ligne réussit.
Le code PHP correspondant est indiqué ci-dessous (communitymap_loginuser.php) :
<?php
require_once 'communitymap_globals.php';
$username = $_POST['username'];
$password = $_POST['password'];
$gdClient = setupClient();
$listFeed = getWkshtListFeed($gdClient, SPREADSHEET_KEY, USER_WORKSHEET_ID, ('user='.$username));
$password_hash = sha1($password);
$row = $listFeed->entries[0];
$rowData = $row->getCustom();
foreach($rowData as $customEntry) {
if ($customEntry->getColumnName()=="password" && $customEntry->getText()==$password_hash) {
$updatedRowArray["user"] = $username;
$updatedRowArray["password"] = sha1($password);
$updatedRowArray["session"] = md5(uniqid(rand(), true));
$updatedRow = $gdClient->updateRow($row, $updatedRowArray);
if ($updatedRow instanceof Zend_Gdata_Spreadsheets_ListEntry) {
echo $updatedRowArray["session"];
}
}
}
?>
Sur la page de connexion, nous pouvons à nouveau inclure l'API Maps afin de pouvoir utiliser sa fonction wrapper XMLHttpRequest appelée GDownloadUrl. Lorsque l'utilisateur clique sur le bouton d'envoi, nous récupérons le nom d'utilisateur et le mot de passe des champs de texte, construisons l'URL du script avec les paramètres de requête et appelons GDownloadUrl sur l'URL du script. Dans la fonction de rappel, nous allons définir un cookie avec l'ID de session renvoyé par le script ou afficher un message d'erreur si aucun ID n'est renvoyé. La fonction setCookie provient d'un fichier cookies.js basé sur le tutoriel JavaScript W3C : http://www.w3schools.com/js/js_cookies.asp.
Vous trouverez ci-dessous une capture d'écran et le code d'un exemple de page de connexion (communitymap_login.htm) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Community Map - Login</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdef"
type="text/javascript"></script>
<script src="cookies.js" type="text/javascript"></script>
<script type="text/javascript">
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var url = "communitymap_loginuser.php?username=" + username + "&password=" + password;
GDownloadUrl(url, function(data, responseCode) {
if (data.length > 1) {
setCookie("session", data, 5);
} else {
document.getElementById("nessage").innerHTML = "Error. Try again.";
}
});
}
</script>
</head>
<body>
<h1>Login for Community Map</h1>
<input type="text" id="username">
<input type="password" id="password">
<input type="button" onclick="login()" value="Login">
<div id="message"></div>
</body>
</html>
Autoriser les utilisateurs à ajouter des lieux sur la carte
Pour permettre à un utilisateur d'ajouter des lieux à notre carte, nous aurons besoin d'une page HTML visible par l'utilisateur pour lui permettre de fournir des informations sur le lieu, et de deux scripts PHP : l'un pour vérifier qu'il est connecté via le cookie que nous avons défini, et l'autre pour ajouter le lieu à la feuille de calcul des lieux.
Dans le premier script PHP qui vérifie si un utilisateur est connecté, nous incluons d'abord le script global, puis nous obtenons la valeur de la session à partir de la variable GET. Nous configurons ensuite un client Spreadsheets et demandons le flux de liste pour la feuille de calcul des utilisateurs avec une chaîne de requête afin de limiter les résultats aux lignes où la colonne "session" est égale à la valeur de session transmise au script. Nous parcourons ensuite les entrées personnalisées de ce flux (celles qui correspondent à nos en-têtes de colonne) et affichons le nom d'utilisateur correspondant à cette session, le cas échéant.
Le code PHP correspondant est indiqué ci-dessous (communitymap_checksession.php) :
<?php
require_once 'communitymap_globals.php';
$session = $_GET['session'];
$gdClient = setupClient();
$listFeed = getWkshtListFeed($gdClient, SPREADSHEET_KEY, USER_WORKSHEET_ID, ('session='.$session));
if ( count($listFeed->entries) > 0) {
$row = $listFeed->entries[0];
$rowData = $row->getCustom();
foreach($rowData as $customEntry) {
if ($customEntry->getColumnName()=="user") {
echo $customEntry->getText();
}
}
}
?>
Dans le deuxième script PHP qui permet à un utilisateur d'ajouter un lieu, nous répliquons d'abord le code de communitymap_checksession.php pour nous assurer que l'utilisateur est toujours connecté et valide. Une fois que nous avons récupéré un nom d'utilisateur valide à partir de la feuille des utilisateurs, nous obtenons les valeurs de lieu, de latitude et de longitude à partir de la variable GET. Nous plaçons toutes ces valeurs dans un tableau associatif et nous ajoutons également une valeur "date" à l'aide de la fonction date() de PHP, afin de savoir quand l'utilisateur a ajouté le lieu. Nous transmettons ce tableau associatif, la constante de clé des feuilles de calcul et la constante d'ID de la feuille de calcul des emplacements à la fonction insertRow. Nous affichons ensuite "Success" (Succès) si une ligne pour le nouvel établissement a été ajoutée à la feuille de calcul. Si vous recevez un message d'erreur à cette étape, cela est probablement dû à une non-concordance des noms d'en-tête de colonne. Les clés du tableau associatif doivent correspondre aux en-têtes de colonne de la feuille de calcul spécifiée par la clé de feuille de calcul et l'ID de feuille de calcul.
Le code PHP correspondant est indiqué ci-dessous (communitymap_addlocation.php) :
<?php
require_once 'communitymap_globals.php';
$session = $_GET['session'];
$gdClient = setupClient();
$listFeed = getWkshtListFeed($gdClient, SPREADSHEET_KEY, USER_WORKSHEET_ID, ('session='.$session));
if ( count($listFeed->entries) > 0) {
$row = $listFeed->entries[0];
$rowData = $row->getCustom();
foreach($rowData as $customEntry) {
if ($customEntry->getColumnName()=="user") {
$user = $customEntry->getText();
}
}
$place = $_GET['place'];
$lat = $_GET['lat'];
$lng = $_GET['lng'];
$rowArray["user"] = $user;
$rowArray["place"] = $place;
$rowArray["lat"] = $lat;
$rowArray["lng"] = $lng;
$rowArray["date"] = date("F j, Y, g:i a");
$entry = $gdClient->insertRow($rowArray, SPREADSHEET_KEY, LOC_WORKSHEET_ID);
if ($entry instanceof Zend_Gdata_Spreadsheets_ListEntry) {
echo "Success!\n";
}
}
?>
Sur la page d'ajout de lieu, nous pouvons à nouveau inclure l'API Maps afin de pouvoir utiliser GDownloadUrl et créer une carte. Une fois la page chargée, nous utilisons la fonction getCookie de cookies.js pour récupérer la valeur de la session. Si la chaîne de session est nulle ou vide, nous affichons un message d'erreur. Dans le cas contraire, nous appelons GDownloadUrl sur map.checksession.php en envoyant la session. Si un nom d'utilisateur est renvoyé, nous affichons un message de bienvenue à l'utilisateur, nous affichons le formulaire d'ajout d'un lieu et nous chargeons la carte. Le formulaire se compose d'un champ de texte pour l'adresse, d'une carte et de champs de texte pour le nom du lieu, la latitude et la longitude. Si l'utilisateur ne connaît pas déjà la latitude et la longitude du lieu, il peut le géocoder en saisissant son adresse dans le formulaire et en cliquant sur "Envoyer". Cela enverra un appel à GClientGeocoder de l'API Maps, qui placera un repère sur la carte s'il trouve l'adresse et remplira automatiquement les champs de texte de latitude et de longitude.
Lorsque l'utilisateur est satisfait, il peut appuyer sur le bouton "Ajouter un lieu". Ensuite, dans JavaScript, nous allons obtenir les valeurs pour l'utilisateur, le lieu, la latitude et la longitude, et les envoyer au script communitymap_addlocation.php avec GDownloadUrl.
Si ce script renvoie un message de réussite, nous affichons un message de réussite à l'écran.
Vous trouverez ci-dessous une capture d'écran et un code pour un exemple de page d'ajout de lieu (communitymap_addlocation.htm) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Community Map - Add a Place!</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=abcdef" type="text/javascript"></script>
<script src="cookies.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var geocoder = null;
var session = null;
function load() {
session = getCookie('session');
if (session != null && session != "") {
url = "communitymap_checksession.php?session=" + session;
GDownloadUrl(url, function(data, responseCode) {
if (data.length > 0) {
document.getElementById("message").innerHTML = "Welcome " + data;
document.getElementById("content").style.display = "block";
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
}
});
} else {
document.getElementById("message").innerHTML = "Error: Not logged in.";
}
}
function addLocation() {
var place = document.getElementById("place").value;
var lat = document.getElementById("lat").value;
var lng = document.getElementById("lng").value;
var url = "communitymap_addlocation.php?session=" + session + "&place=" + place +
"&lat=" + lat + "&lng=" + lng;
GDownloadUrl(url, function(data, responseCode) {
GLog.write(data);
if (data.length > 0) {
document.getElementById("message").innerHTML = "Location added.";
}
});
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point, {draggable:true});
document.getElementById("lat").value = marker.getPoint().lat().toFixed(6);
document.getElementById("lng").value = marker.getPoint().lng().toFixed(6);
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
document.getElementById("lat").value = marker.getPoint().lat().toFixed(6);
document.getElementById("lng").value = marker.getPoint().lng().toFixed(6);
});
}
}
);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="message"></div>
<div id="content" style="display:none">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" />
<input type="submit" value="Geocode!" />
</form>
</p>
<div id="map" style="width: 500px; height: 300px"></div>
Place name: <input type="text" size="20" id="place" value="" />
<br/>
Lat: <input type="text" size="20" id="lat" value="" />
<br/>
Lng: <input type="text" size="20" id="lng" value="" />
<br/>
<input type="button" onclick="addLocation()" value="Add a location" />
</form>
</div>
</body>
</html>
Créer la carte
Comme vous avez rendu la feuille de calcul des lieux publique lors de la première étape, aucune programmation côté serveur n'est requise pour créer une carte. En fait, aucune programmation n'est requise. Vous pouvez utiliser l'assistant Feuilles de calcul > Carte, qui générera tout le code nécessaire pour la carte. L'assistant télécharge les entrées de la feuille de calcul sur la page en ajoutant une balise de script qui pointe vers la sortie JSON du flux et spécifie une fonction de rappel qui est appelée une fois le fichier JSON téléchargé. Pour en savoir plus, cliquez ici.
Un exemple de code HTML est disponible ici : mainmap.htm. Voici une capture d'écran :
Conclusion
Nous espérons que vous disposez désormais de votre propre système de cartographie alimenté par les utilisateurs sur votre serveur. Cet article fournit le code de base nécessaire pour les aspects essentiels de ce système. Toutefois, maintenant que vous connaissez la bibliothèque Zend Spreadsheets, vous devriez être en mesure d'étendre le système pour répondre à vos besoins spécifiques. Si vous avez rencontré des erreurs, n'oubliez pas que vous pouvez utiliser la commande echo en PHP ou GLog.write() de l'API Maps en JavaScript pour le débogage. Vous pouvez également publier un message sur les forums pour les développeurs de l'API Maps ou de l'API Google Sheets pour obtenir de l'aide supplémentaire.