Novembre 2007
Objectif
Le Web regorge de communautés axées sur des zones géographiques et des centres d'intérêt: les amoureux des musées, des cathédrales européennes, des parcs d'État, etc. Il est donc toujours nécessaire qu'un développeur (comme vous !) crée un système où les utilisateurs peuvent ajouter des lieux géomarqué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éomarqués. Le système utilise AJAX pour l'interface, 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 afin d'utiliser un backend de base de données MySQL.
Cet article comprend les étapes suivantes:
- Configurer la feuille de calcul
- Utiliser le framework de données Zend
- Créer des fonctions globales
- Enregistrement d'un nouvel utilisateur
- Se connecter avec un compte utilisateur
- Autoriser les utilisateurs à ajouter des lieux sur la carte
- Créer la carte
- Conclusion
Configuration de la feuille de calcul
Nous utiliserons l'outil Feuilles de calcul Google pour stocker toutes les données de ce système. Nous devons stocker deux types de données: les informations sur les comptes utilisateur et les lieux ajoutés par l'utilisateur. 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 des 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 intitulées "utilisateur", "mot de passe" et "session". Ajoutez ensuite une autre feuille, renommez-la "Locations" et créez des colonnes "user", "status", "lat", "lng" et "date". Si vous n'avez pas besoin du travail manuel, téléchargez ce modèle et importez-le dans Google Sheets via la commande Fichier->Importer.
Les informations du compte utilisateur doivent rester confidentielles (visibles uniquement par le propriétaire de la feuille de calcul), tandis que les lieux ajoutés par l'utilisateur sont affichés sur une carte publique. Heureusement, Google Sheets vous permet de sélectionner de manière sélective les feuilles de calcul qui peuvent être publiques et celles qui doivent rester privées (par défaut). Pour publier la feuille de calcul "Zones géographiques", cliquez sur l'onglet "Publier", puis sur "Publier" et cochez la case "Republier automatiquement". Ensuite, dans la liste déroulante "Quelles parties ?", sélectionnez "Feuilles uniquement". Les options correctes sont indiquées dans la capture d'écran ci-dessous:
Utiliser le framework GData de Zend
L'API Google Sheets fournit une interface HTTP pour les opérations CRUD, telles que la récupération, l'insertion, la mise à jour et la suppression de lignes. Zend Framework fournit un wrapper PHP en plus de l'API (et des autres API GData). Vous n'avez donc 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 déjà 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 inclusion_path PHP pour inclure la bibliothèque Zend. Vous disposez pour cela de plusieurs méthodes, en fonction du niveau des droits d'administration que vous détenez sur votre serveur. Vous pouvez par exemple ajouter cette ligne au-dessus des instructions requises dans tous les fichiers PHP à l'aide de la bibliothèque :
ini_set("include_path", ".:/usr/lib/php:/usr/local/lib/php:../../../library/");
Pour le tester, exécutez la démo de Tableur en saisissant ce qui suit dans la ligne de commande du dossier demos/Zend/Gdata:
php Spreadsheet-ClientLogin.php --user=YourGMailUsername --pass=YourPassword
Si cela fonctionne, la liste des feuilles de calcul devrait s'afficher. Si une erreur s'affiche, vérifiez que le chemin d'inclusion est correctement défini et que PHP 5 est installé.
Créer des fonctions globales
Tous les scripts PHP que nous écrirons pour la carte de la communauté utiliseront des inclusions, des variables et des fonctions courantes, que nous allons placer dans un seul fichier.
Au début du fichier, nous disposons des instructions nécessaires pour inclure et charger la bibliothèque Zend, tirée de l'exemple Tableur-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 "Autres options de publication". Sélectionnez "ATOM" dans la liste déroulante "Format de fichier", puis cliquez sur "Générer une URL". Le résultat qui s'affiche doit ressembler à ceci:
http://spreadsheets.google.com/feeds/list/o16162288751915453340.4016005092390554215/od6/public/basic
La clé de la feuille de calcul correspond à la longue chaîne alphanumérique suivie de "/list/", suivie de l'ID de la feuille de calcul. Pour trouver un autre ID, sélectionnez-le dans le menu déroulant "Quelles feuilles ?".
Nous allons ensuite créer trois fonctions: setupClient, getWkshtListFeed et printFeed. Dans "clientClient", nous allons définir notre nom d'utilisateur et mot de passe Gmail, nous authentifier avec ClientLogin et renvoyer un objet Zend_Gdata_Spreadsheets. Dans getWkshtListFeed, nous renvoyons 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 provient de l'exemple Tableur-ClientLogin.php et peut être utile pour le débogage. Elle utilise un objet de flux et l'affiche à l'écran.
Le code PHP qui permet d'effectuer cette opération est illustré 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++;
}
}
?>
Enregistrement d'un nouvel utilisateur
Pour enregistrer un nouvel utilisateur, nous avons besoin d'une page HTML destinée aux utilisateurs, comportant des champs de texte et un bouton d'envoi, ainsi qu'un script backend PHP pour ajouter l'utilisateur à la feuille de calcul.
Dans le script PHP, nous commençons par inclure le script global, puis nous obtenons les valeurs du nom d'utilisateur et du mot de passe à partir de la variable GET. Ensuite, nous configurons un client Tableur et demandons le flux de liste pour la feuille de calcul des utilisateurs avec une chaîne de requête pour limiter les résultats aux seules lignes dont la colonne de nom d'utilisateur correspond au nom d'utilisateur transmis dans le 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 la colonne: le nom d'utilisateur, le 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é des feuilles de calcul et l'ID de la feuille de calcul. Si l'objet renvoyé est une ListFeedEntry, nous affichons un message Success!.
Le code PHP correspondant est affiché 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 Google Maps afin de pouvoir utiliser sa fonction wrapper XMLHttpRequest appelée GDownloadUrl. Lorsque l'utilisateur clique sur le bouton d'envoi, nous obtenons le nom d'utilisateur et le mot de passe à partir des champs de texte, nous créons une chaîne de paramètres à partir de ses valeurs et nous appelons GDownloadUrl sur l'URL et les paramètres du script. Dans la mesure où nous envoyons des informations sensibles, nous utilisons la version HTTP POST de GDownloadUrl (en envoyant les paramètres comme troisième argument au lieu de les ajouter à l'URL). Dans la fonction de rappel, nous allons vérifier si une réponse a été envoyée et envoyer un message approprié à l'utilisateur.
Une capture d'écran et du code sont présentés ci-dessous pour 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 à un compte utilisateur
Pour permettre aux utilisateurs de se connecter à notre système, nous souhaitons qu'une page HTML destinée à l'utilisateur les invite à saisir leur nom d'utilisateur et leur mot de passe, ainsi qu'un script PHP permettant de vérifier les informations de connexion, de créer un identifiant de session et de le renvoyer à la page de connexion afin de définir un cookie. L'utilisateur restera connecté via le cookie de session sur les pages suivantes.
Dans le script PHP, nous commençons par inclure le script global, puis nous obtenons les valeurs du nom d'utilisateur et du mot de passe à partir de la variable GET. Ensuite, nous configurons un client Tableur et demandons le flux de liste pour la feuille de calcul des utilisateurs avec une chaîne de requête pour limiter les résultats aux seules lignes dont la colonne de nom d'utilisateur correspond au nom d'utilisateur transmis dans le script.
Sur la ligne qui s'affiche, nous vérifions que le hachage du mot de passe transmis correspond au hachage stocké dans la feuille de calcul. Si tel est le cas, nous allons créer un identifiant 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 aboutit.
Le code PHP qui permet d'effectuer cette opération est présenté 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 de nouveau inclure l'API Google Maps afin de pouvoir utiliser sa fonction XMLHttpRequest wrapper appelée GDownloadUrl. Lorsque l'utilisateur clique sur le bouton d'envoi, nous obtenons le nom d'utilisateur et le mot de passe à partir des champs de texte, nous créons l'URL du script avec les paramètres de requête et nous 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 générer un message d'erreur si aucun n'est renvoyé. La fonction setCookie est issue d'un cookie.js basé sur le didacticiel JavaScript w3c: http://www.w3schools.com/js/js_cookies.asp.
Une capture d'écran et du code sont présentés ci-dessous pour 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 sur notre carte, nous voulons qu'une page HTML destinée aux utilisateurs lui fournisse des informations sur le lieu et 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 fiche d'établissement.
Dans le premier script PHP qui vérifie si un utilisateur est connecté, nous incluons d'abord le script global, puis obtenons la valeur de session à partir de la variable GET. Ensuite, nous configurons un client Tableur 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 seules lignes où la colonne session correspond à la valeur de session transmise dans le script. Ensuite, nous parcourons les entrées personnalisées de ce flux (celles qui correspondent aux en-têtes de colonne) et imprimons le nom d'utilisateur correspondant pour cette session, le cas échéant.
Le code PHP qui permet d'effectuer cette opération est présenté 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 second script PHP qui permet à un utilisateur d'ajouter un lieu, nous commençons par répliquer le code de communitymap_checksession.php, pour vérifier que l'utilisateur est toujours connecté et valide. Ensuite, lorsque nous obtenons 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 ajoutons également une valeur "date" à l'aide de la fonction date() de PHP, afin que nous puissions savoir quand l'utilisateur a ajouté le lieu. Nous transmettons ce tableau associatif, la constante de la clé Sheets et l'ID de la feuille de calcul des emplacements à la fonction insertRow. Nous affichons ensuite "Success" (Réussite) si une ligne correspondant au nouvel emplacement a été ajoutée à la feuille de calcul. Si une erreur s'affiche à cette étape, elle est probablement due à une incohérence au niveau des noms des en-têtes de colonne. Les clés du tableau associatif doivent correspondre aux en-têtes de colonne de la feuille de calcul spécifié par l'ID de la feuille de calcul et l'ID de la feuille de calcul.
Le code PHP correspondant (communitymap_addlocation.php) est présenté ci-dessous :
<?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 "Add Location" (Ajouter un emplacement), nous pouvons de nouveau inclure l'API Google Maps afin de pouvoir utiliser GDownloadUrl et créer une carte. Une fois la page chargée, nous utilisons la fonction getCookie du cookie.js pour récupérer la valeur de la session. Si la chaîne de session est nulle ou vide, un message d'erreur s'affiche. Si ce n'est pas le cas, nous appelons GDownloadUrl sur map.checksession.php, en envoyant la session. Si vous obtenez un nom d'utilisateur, nous affichons un message de bienvenue, affichons le formulaire d'ajout d'un lieu et chargeons la carte. Le formulaire est composé d'un champ de texte d'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 la latitude/longitude du lieu, il peut le géocoder en saisissant son adresse dans le formulaire et en appuyant sur "Envoyer". Un appel est envoyé au GClientGeocoder de l'API Google Maps, qui repère un repère sur la carte s'il trouve l'adresse et renseigne automatiquement les champs de texte (latitude/longitude).
Lorsque l'utilisateur est satisfait, il peut appuyer sur le bouton "Ajouter un lieu". Ensuite, dans le code JavaScript, nous récupérons les valeurs utilisateur, place, lat et lng, puis nous les envoyons au script communitymap_addlocation.php avec GDownloadUrl.
Si ce script renvoie un message de réussite, un message de confirmation s'affiche à l'écran.
Une capture d'écran et du code sont présentés ci-dessous 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
Étant donné que vous avez rendu les fiches d'établissement publiques au cours de la première étape, aucune programmation côté serveur n'est nécessaire pour créer une carte de celles-ci. En fait, aucune programmation n'est requise. Vous pouvez utiliser Feuilles de calcul -> Assistant de carte pour générer tout le code nécessaire à la création de la carte. L'assistant télécharge les entrées de la feuille de calcul dans la page en ajoutant un tag de script qui pointe vers la sortie JSON du flux, puis 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 à cette adresse: mainmap.htm. Une capture d'écran est affichée ci-dessous:
Conclusion
Nous espérons que votre propre système de cartes fournies par les utilisateurs s'exécute sur votre serveur. Cet article fournit le code le plus élémentaire nécessaire aux aspects essentiels de ce système. Maintenant que vous connaissez la bibliothèque de feuilles de calcul Zend, vous devriez être en mesure d'étendre le système en fonction de vos besoins. Si vous avez rencontré des erreurs, n'oubliez pas que vous pouvez utiliser la commande echo en PHP ou la GLog.write() de JavaScript de l'API Google Maps pour le débogage. Vous pouvez également publier un message sur les forums des développeurs API Maps ou API Sheets pour obtenir de l'aide.