نوفمبر 2007
الهدف
يمتلئ الويب بالمنتديات التي تركّز على المناطق الجغرافية والاهتمامات، مثل الأشخاص الذين يحبون المتاحف والكاتدرائيات الأوروبية والحدائق الوطنية وما إلى ذلك. لذلك، هناك دائمًا حاجة إلى مطوّر (مثلك!) لإنشاء نظام يتيح للمستخدمين إضافة أماكن ذات علامات جغرافية إلى خريطة، وهذا ما سنفعله بالضبط هنا. في نهاية هذه المقالة، سيكون لديك نظام يمكن للمستخدمين من خلاله التسجيل وتسجيل الدخول وإضافة أماكن محدّدة الموقع الجغرافي. سيستخدم النظام AJAX للواجهة الأمامية، وPHP لبرمجة النصوص من جهة الخادم، و"جداول بيانات Google" للتخزين. إذا كنت معتادًا على استخدام قواعد بيانات MySQL للتخزين، يمكنك بسهولة تعديل الرمز هنا لاستخدام خلفية قاعدة بيانات MySQL بدلاً من ذلك.
تنقسم هذه المقالة إلى الخطوات التالية:
- إعداد جدول البيانات
- العمل باستخدام Zend Gdata Framework
- إنشاء دوال عامة
- تسجيل مستخدم جديد
- تسجيل دخول مستخدم
- السماح للمستخدمين بإضافة أماكن إلى الخريطة
- إنشاء الخريطة
- الخاتمة
إعداد جدول البيانات
سنستخدم "جداول بيانات Google" لتخزين جميع بيانات هذا النظام. هناك نوعان من البيانات التي نحتاج إلى تخزينها: معلومات حساب المستخدم والأماكن التي أضافها المستخدم، لذا سننشئ ورقة واحدة لكل نوع من البيانات. سنتفاعل مع أوراق العمل باستخدام خلاصة القائمة، التي تعتمد على الصف الأول في ورقة العمل الذي يحتوي على تصنيفات الأعمدة، وكل صف لاحق يحتوي على بيانات.
انتقِل إلى docs.google.com وأنشئ جدول بيانات جديدًا. أعِد تسمية ورقة العمل التلقائية إلى "المستخدمون"، وأنشئ أعمدة باسم "المستخدم" و"كلمة المرور" و "الجلسة". بعد ذلك، أضِف ورقة أخرى وأعِد تسميتها إلى "المواقع الجغرافية"، وأنشئ أعمدة باسم "المستخدم" و"الحالة" و"خط العرض" و"خط الطول" و "التاريخ". أو، إذا كنت لا تريد القيام بكل هذا العمل اليدوي، نزِّل هذا النموذج واستورِده إلى "جداول بيانات Google" من خلال الأمر "ملف" -> "استيراد".
يجب الحفاظ على خصوصية معلومات حساب المستخدم (لا تظهر إلّا لمالك جدول البيانات، أي أنت)، بينما ستظهر الأماكن التي أضافها المستخدم على خريطة مرئية للجميع. لحسن الحظ، تتيح لك "جداول بيانات Google" أن تقرّر بشكل انتقائي أوراق العمل التي يمكن أن تكون علنية وتلك التي يجب أن تظل خاصة (الإعداد التلقائي). لنشر ورقة عمل "المواقع الجغرافية"، انقر على علامة التبويب "نشر"، ثم على "النشر الآن"، وضع علامة في مربّع الاختيار "إعادة النشر تلقائيًا"، ثم اختَر "ورقة "المواقع الجغرافية " فقط" من القائمة المنسدلة "ما هي الأجزاء؟". تظهر الخيارات الصحيحة في لقطة الشاشة أدناه:
العمل باستخدام إطار Zend GData
توفّر واجهة برمجة التطبيقات Google Spreadsheets API واجهة HTTP لعمليات CRUD، مثل استرداد الصفوف وإدراجها وتعديلها وحذفها. يوفّر Zend Framework برنامج تضمين PHP فوق واجهة برمجة التطبيقات (وغيرها من واجهات GData API) حتى لا تقلق بشأن تنفيذ عمليات HTTP الأولية. يتطلّب Zend Framework الإصدار 5 من PHP.
إذا لم يكن لديك إطار عمل Zend، نزِّله وحمِّله إلى الخادم. يتوفّر إطار العمل هنا: http://framework.zend.com/download/gdata.
عليك تعديل include_path في PHP لتضمين مكتبة Zend. تتوفّر عدة طرق لإجراء ذلك، وذلك يعتمد على مستوى حقوق الإدارة المتوفّرة لديك على الخادم. إحدى الطرق هي إضافة هذا السطر فوق عبارات require في أي ملفات PHP تستخدم المكتبة:
ini_set("include_path", ".:/usr/lib/php:/usr/local/lib/php:../../../library/");
لتجربة ذلك، شغِّل العرض التوضيحي لجداول بيانات Google من خلال إدخال ما يلي في سطر الأوامر في المجلد demos/Zend/Gdata:
php Spreadsheet-ClientLogin.php --user=YourGMailUsername --pass=YourPassword
إذا نجحت العملية، ستظهر لك قائمة بجداول البيانات. إذا ظهر لك خطأ، تأكَّد من ضبط مسار التضمين بشكلٍ صحيح ومن تثبيت الإصدار 5 من PHP.
إنشاء دوال عمومية
ستستخدم جميع نصوص PHP البرمجية التي سنكتبها لـ "خريطة المنتدى" عمليات تضمين ومتغيرات ودوال شائعة، وسنضعها في ملف واحد.
في بداية الملف، سنضمّن العبارات اللازمة لتضمين مكتبة Zend وتحميلها، وهي مأخوذة من مثال Spreadsheets-ClientLogin.php.
بعد ذلك، سنحدّد الثوابت التي سيتم استخدامها في جميع الملفات: مفتاح جدول البيانات ومعرّفَي ورقتَي العمل. للعثور على معلومات جدول البيانات، افتحه وانقر على علامة التبويب "نشر"، ثم على "المزيد من خيارات النشر". اختَر "ATOM" من القائمة المنسدلة "تنسيق الملف"، ثم انقر على "إنشاء عنوان URL". سيظهر لك ما يلي:
http://spreadsheets.google.com/feeds/list/o16162288751915453340.4016005092390554215/od6/public/basic
مفتاح جدول البيانات هو السلسلة الطويلة المكوّنة من أحرف وأرقام بعد "/list/"، ومعرّف ورقة العمل هو السلسلة المكوّنة من 3 أحرف بعد ذلك. للعثور على رقم تعريف ورقة العمل الأخرى، اختَر الورقة الأخرى من القائمة المنسدلة "ما هي أوراق البيانات؟".
بعد ذلك، سننشئ 3 دوال: setupClient وgetWkshtListFeed وprintFeed. في setupClient، سنضبط اسم المستخدم وكلمة المرور في Gmail، ونتحقق من صحة بيانات الاعتماد باستخدام ClientLogin، ونعرض عنصر Zend_Gdata_Spreadsheets. في getWkshtListFeed، سنعرض خلاصة قائمة "جداول بيانات" لمفتاح جدول بيانات ومعرّف ورقة عمل محدّدين، مع طلب بحث اختياري في "جداول بيانات" (رابط). تم أخذ الدالة printFeed من المثال Spreadsheets-ClientLogin.php، وقد تكون مفيدة لك في تصحيح الأخطاء. سيستقبل عنصر خلاصة ويعرضه على الشاشة.
يظهر أدناه رمز PHP الذي ينفّذ هذه العملية (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++;
}
}
?>
تسجيل مستخدم جديد
لتسجيل مستخدم جديد، نحتاج إلى صفحة HTML موجّهة للمستخدمين تتضمّن حقولاً نصية وزر إرسال، بالإضافة إلى نص برمجي PHP في الخلفية لإضافة المستخدم إلى جدول البيانات.
في نص PHP البرمجي، نضمّن أولاً النص البرمجي العام، ثم نحصل على قيم اسم المستخدم وكلمة المرور من متغيّر GET. بعد ذلك، نضبط برنامجًا Spreadsheets، ونطلب خلاصة القائمة لورقة عمل المستخدمين باستخدام سلسلة طلب بحث لحصر النتائج على الصفوف التي يساوي فيها عمود اسم المستخدم اسم المستخدم الذي تم تمريره إلى البرنامج النصي فقط. إذا لم نحصل على أي صفوف في نتيجة خلاصة القائمة، يمكننا المتابعة بأمان مع العلم أنّ اسم المستخدم الذي تم إدخاله فريد. قبل إدراج صف في خلاصة القائمة، ننشئ مصفوفة ترابطية لقيم الأعمدة: اسم المستخدم، وتشفير كلمة المرور باستخدام دالة sha1 في PHP، وحرف تعبئة للجلسة. بعد ذلك، نستدعي insertRow على عميل جداول البيانات، ونمرّر إليه المصفوفة الترابطية ومفتاح جداول البيانات ومعرّف ورقة العمل. إذا كان العنصر الذي تم إرجاعه هو ListFeedEntry، سنعرض الرسالة "تم بنجاح".
يظهر أدناه رمز PHP الذي ينفّذ هذه العملية (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!";
}
?>
في صفحة التسجيل، يمكننا تضمين Maps API حتى نتمكّن من استخدام وظيفة التفاف XMLHttpRequest التي تُسمى GDownloadUrl. عندما ينقر المستخدم على زر الإرسال، سنحصل على اسم المستخدم وكلمة المرور من حقول النص، وننشئ سلسلة مَعلمات من قيمهما، ونستدعي GDownloadUrl على عنوان URL للبرنامج النصي والمَعلمات. بما أنّنا نرسل معلومات حساسة، نستخدم إصدار HTTP POST من GDownloadUrl (عن طريق إرسال المَعلمات كمعلَمة ثالثة بدلاً من إلحاقها بعنوان URL). في دالة معاودة الاتصال، سنتحقّق من تلقّي ردّ ناجح ونعرض رسالة مناسبة للمستخدم.
في ما يلي لقطة شاشة ورمز لصفحة تسجيل نموذجية (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>
تسجيل دخول مستخدم
للسماح للمستخدمين بتسجيل الدخول إلى نظامنا، نحتاج إلى صفحة HTML موجّهة للمستخدمين تطلب منهم إدخال اسم المستخدم وكلمة المرور، بالإضافة إلى نص برمجي بلغة PHP للتحقّق من معلومات تسجيل الدخول وإنشاء رقم تعريف للجلسة وإعادته إلى صفحة تسجيل الدخول لضبط ملف تعريف ارتباط. سيظل المستخدم مسجِّلاً الدخول من خلال ملف تعريف ارتباط الجلسة على الصفحات اللاحقة.
في نص PHP البرمجي، نضمّن أولاً النص البرمجي العام، ثم نحصل على قيم اسم المستخدم وكلمة المرور من متغيّر GET. بعد ذلك، نضبط برنامجًا Spreadsheets، ونطلب خلاصة القائمة لورقة عمل المستخدمين باستخدام سلسلة طلب بحث لحصر النتائج على الصفوف التي يساوي فيها عمود اسم المستخدم اسم المستخدم الذي تم تمريره إلى البرنامج النصي فقط.
في الصف الذي يتم عرضه، سنتأكّد من أنّ قيمة التجزئة لكلمة المرور التي تم إدخالها تطابق قيمة التجزئة المخزّنة في جدول البيانات. إذا كان الأمر كذلك، سننشئ معرّف جلسة باستخدام دوال md5 وuniqid وrand. بعد ذلك، سنعدّل الصف في جدول البيانات باستخدام الجلسة، وسنعرضه على الشاشة إذا نجح تعديل الصف.
يظهر أدناه رمز PHP الذي ينفّذ ذلك (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"];
}
}
}
?>
في صفحة تسجيل الدخول، يمكننا مرة أخرى تضمين Maps API حتى نتمكّن من استخدام وظيفة التفاف XMLHttpRequest التي تحمل الاسم GDownloadUrl. عندما ينقر المستخدم على زر الإرسال، سنحصل على اسم المستخدم وكلمة المرور من حقول النص، وننشئ عنوان URL للبرنامج النصي مع مَعلمات طلب البحث، ونستدعي GDownloadUrl على عنوان URL للبرنامج النصي. في دالة معاودة الاتصال، سنضبط ملف تعريف ارتباط يتضمّن رقم تعريف الجلسة الذي يعرضه النص البرمجي، أو سنعرض رسالة خطأ في حال عدم عرض أي رقم تعريف. تأتي الدالة setCookie من ملف cookies.js المستند إلى البرنامج التعليمي w3c JavaScript: http://www.w3schools.com/js/js_cookies.asp.
في ما يلي لقطة شاشة ورمز لصفحة تسجيل دخول نموذجية (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>
السماح للمستخدمين بإضافة أماكن على الخريطة
للسماح للمستخدم بإضافة أماكن إلى خريطتنا، نحتاج إلى صفحة HTML موجّهة للمستخدمين تتيح لهم تقديم معلومات حول الموقع الجغرافي، وبرنامجي نص PHP، أحدهما للتحقّق من تسجيل الدخول من خلال ملف تعريف الارتباط الذي نضبطه، والآخر لإضافة الموقع الجغرافي إلى ورقة عمل المواقع الجغرافية.
في برنامج PHP النصي الأول الذي يتحقّق مما إذا كان المستخدم مسجّلاً الدخول، نضمِّن أولاً البرنامج النصي العام ثم نحصل على قيمة الجلسة من متغيّر GET. بعد ذلك، نضبط عميل "جداول بيانات Google"، ونطلب خلاصة القائمة لورقة عمل المستخدمين مع سلسلة طلب بحث لحصر النتائج على الصفوف التي يساوي فيها عمود الجلسة قيمة الجلسة التي تم تمريرها إلى البرنامج النصي فقط. بعد ذلك، نكرّر الإدخالات المخصّصة لهذه الخلاصة (تلك التي تتوافق مع عناوين الأعمدة)، ونطبع اسم المستخدم المقابل لهذه الجلسة إذا كان متوفّرًا.
يظهر أدناه رمز PHP الذي ينفّذ ذلك (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();
}
}
}
?>
في نص PHP البرمجي الثاني الذي يتيح للمستخدم إضافة موقع جغرافي، نكرّر أولاً الرمز من communitymap_checksession.php، للتأكّد من أنّ المستخدم لا يزال مسجّلاً الدخول وصالحًا. بعد ذلك، عندما نحصل على اسم مستخدم صالح من ورقة المستخدمين، نحصل على قيم المكان وخطوط الطول والعرض من متغيّر GET. نضع كل هذه القيم في مصفوفة ترابطية، ونضيف أيضًا قيمة "التاريخ" باستخدام دالة date() في PHP، حتى نعرف متى أضاف المستخدم المكان. نمرّر مصفوفة الربط هذه وثابت مفتاح جداول البيانات وثابت معرّف ورقة عمل المواقع الجغرافية إلى الدالة insertRow. بعد ذلك، نعرض "تم بنجاح" إذا تمت إضافة صف للموقع الجغرافي الجديد إلى جدول البيانات. إذا ظهر لك خطأ في هذه الخطوة، من المحتمل أن يكون السبب هو عدم تطابق أسماء عناوين الأعمدة. يجب أن تتطابق المفاتيح في المصفوفة الترابطية مع عناوين الأعمدة في ورقة العمل المحدّدة بواسطة مفتاح جدول البيانات ومعرّف ورقة العمل.
يظهر أدناه رمز PHP الذي ينفّذ ذلك (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";
}
}
?>
في صفحة إضافة الموقع الجغرافي، يمكننا تضمين Maps API مرة أخرى حتى نتمكّن من استخدام GDownloadUrl وإنشاء خريطة. بعد تحميل الصفحة، نستخدم الدالة getCookie من cookies.js لاسترداد قيمة الجلسة. إذا كان سلسلة الجلسة فارغة أو لا تتضمّن أي قيمة، نعرض رسالة خطأ. إذا لم يكن كذلك، سنطلب GDownloadUrl على map.checksession.php، مع إرسال الجلسة. إذا تم عرض اسم مستخدم بنجاح، نعرض رسالة ترحيب للمستخدم، ونكشف عن نموذج إضافة موقع جغرافي، ونحمّل الخريطة. يتألف النموذج من حقل نصي للعنوان وخريطة وحقول نصية لاسم المكان وخط العرض وخط الطول. إذا لم يكن المستخدم يعرف خط العرض/الطول للموقع الجغرافي، يمكنه ترميزه جغرافيًا عن طريق إدخال عنوانه في النموذج والضغط على "إرسال". سيؤدي ذلك إلى إرسال طلب إلى GClientGeocoder في Map API، ما سيؤدي إلى وضع علامة على الخريطة إذا عثر على العنوان، وملء حقول النص الخاصة بخطوط الطول والعرض تلقائيًا.
عندما يكون المستخدم راضيًا، يمكنه الضغط على الزر "إضافة موقع جغرافي". بعد ذلك، سنحصل في JavaScript على قيم المستخدم والمكان وخطوط الطول والعرض، وسنرسلها إلى النص البرمجي communitymap_addlocation.php باستخدام GDownloadUrl.
إذا عرض هذا النص البرمجي نتيجة ناجحة، سنعرض رسالة نجاح على الشاشة.
في ما يلي لقطة شاشة ورمز لصفحة نموذجية لإضافة موقع جغرافي (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>
إنشاء الخريطة
بما أنّك أتحت ورقة بيانات المواقع الجغرافية للجميع في الخطوة الأولى، لن تحتاج إلى برمجة من جهة الخادم لإنشاء خريطة لها. في الواقع، لا تحتاج إلى أي برمجة على الإطلاق. يمكنك استخدام جداول بيانات Google -> معالج الخرائط، وسيتم إنشاء كل الرموز اللازمة للخريطة. يُنزّل المعالج إدخالات ورقة العمل إلى الصفحة من خلال إضافة علامة نصية تشير إلى إخراج JSON الخاص بالخلاصة، ويحدّد دالة ردّ يتم استدعاؤها بعد تنزيل JSON. يمكنك الاطّلاع على مزيد من المعلومات هنا.
يتوفّر نموذج لرمز HTML لإجراء ذلك هنا: mainmap.htm. في ما يلي لقطة شاشة:
الخاتمة
نأمل أن يكون لديك الآن نظام خرائط يساهم فيه المستخدمون ويعمل على الخادم الخاص بك. تقدّم هذه المقالة الرمز الأساسي جدًا اللازم للجوانب الأساسية لهذا النظام، ولكن بعد أن أصبحت على دراية بمكتبة Zend Spreadsheets، يجب أن تتمكّن من توسيع النظام لتلبية احتياجاتك الخاصة. إذا واجهتك أخطاء أثناء التنفيذ، تذكَّر أنّه يمكنك استخدام الأمر echo في PHP أو GLog.write() في JavaScript لتصحيح الأخطاء في Map API، ويمكنك دائمًا نشر مشاركة في منتديات المطوّرين Maps API أو Spreadsheets API للحصول على مساعدة إضافية.