تشرين الثاني (نوفمبر) 2007
الغرض
الويب مليء بالمجتمعات التي تركّز على المناطق الجغرافية والاهتمامات، مثل الأشخاص الذين يحبّون المتاحف والكاتدرائيات الأوروبية والمتنزهات الحكومية وما إلى ذلك. ولذلك، هناك حاجة دائمًا إلى مطوّر برامج (مثلك) لإنشاء نظام يستطيع المستخدمون من خلاله المساهمة بأماكن تحمل علامة جغرافية على خريطة، وهذا بالضبط ما سنفعله هنا. في نهاية هذه المقالة، ستحصل على نظام يمكّن المستخدمين من تسجيل الأماكن التي تم وضع علامات جغرافية عليها وتسجيل الدخول إليها. وسيستخدم النظام AJAX للواجهة الأمامية وPHP للنصوص البرمجية من جانب الخادم وجداول بيانات Google للتخزين. إذا كنت معتادًا على استخدام قواعد بيانات MySQL للتخزين، يمكنك بسهولة تعديل الرمز هنا لاستخدام خلفية قاعدة بيانات MySQL بدلاً من ذلك.
يتم تقسيم هذه المقالة إلى الخطوات التالية:
- إعداد جدول البيانات
- العمل مع Zend Gdata Framework
- إنشاء دوال عالمية
- تسجيل مستخدم جديد
- تسجيل دخول مستخدم
- السماح للمستخدمين بإضافة أماكن على الخريطة
- إنشاء الخريطة
- الخاتمة
إعداد جدول البيانات
سنستخدم جداول بيانات Google لتخزين جميع البيانات لهذا النظام. هناك نوعان من البيانات التي نحتاج إلى تخزينها: معلومات حساب المستخدم والأماكن التي يضيفها المستخدم، لذا سنعمل على إنشاء ورقة عمل واحدة لكل نوع من أنواع البيانات. سنعمل مع أوراق العمل على التفاعل مع خلاصة القوائم التي تعتمد على الصف الأول في ورقة العمل التي تحتوي على تصنيفات الأعمدة وكل صف لاحق يحتوي على بيانات.
انتقل إلى docs.google.com، وأنشئ جدول بيانات جديدًا. أعد تسمية ورقة العمل الافتراضية إلى "المستخدمون"، وأنشئ أعمدة باسم "المستخدم"، و"كلمة المرور"، و"الجلسة". وبعد ذلك، أضف ورقة أخرى، وأعد تسميتها إلى "المواقع"، ثم أنشئ أعمدة تحمل اسم "user"، و"status"، و"lat"، و"lng"، و"date". أو إذا كنت لا تشعر بأنك تحتاج إلى كل هذا الجهد اليدوي، فنزِّل هذا النموذج واستورده إلى جداول بيانات Google من خلال الأمر File->Import.
يلزم الحفاظ على خصوصية معلومات حسابات المستخدمين (بحيث تكون مرئية فقط لمالك جدول البيانات، بينما يتم عرض الأماكن المضافة بواسطة المستخدم على خريطة مرئية بشكل عام). لحسن الحظ، تسمح لك جداول بيانات Google بتحديد أوراق العمل التي يمكن أن تكون عامة بشكل انتقائي، وتلك التي ينبغي أن تظل خاصة (افتراضية). لنشر ورقة عمل "المواقع"، انقر على علامة التبويب "نشر"، ثم انقر على "نشر الآن"، وحدد مربع الاختيار "إعادة النشر تلقائيًا"، ثم من القائمة المنسدلة "ما الأجزاء؟" حدد "ورقة "المواقع" فقط. تظهر الخيارات الصحيحة في لقطة الشاشة أدناه:

العمل مع Zend GData Framework
توفر واجهة برمجة تطبيقات جداول بيانات Google واجهة HTTP لعمليات CRUD مثل استرداد الصفوف وإدراج الصفوف وتحديث الصفوف وحذف الصفوف. يوفر إطار عمل Zend برنامج تضمين لغة PHP أعلى واجهة برمجة التطبيقات (وواجهات برمجة تطبيقات GData الأخرى) حتى لا تقلق بشأن تنفيذ عمليات HTTP الأولية. يتطلب إطار عمل Zend لغة PHP 5.
إذا لم يكن لديك إطار عمل Zend، فنزّله وحمّله إلى الخادم. يتوفّر إطار العمل هنا: http://framework.zend.com/download/gdata.
يجب تعديل PHP include_path ليتضمن مكتبة Zend. هناك العديد من الطرق لإجراء ذلك، بناءً على مستوى حقوق الإدارة التي تمتلكها على الخادم. تتمثل إحدى الطرق في إضافة هذا السطر فوق العبارات المطلوبة في أي ملفات PHP باستخدام المكتبة:
ini_set("include_path", ".:/usr/lib/php:/usr/local/lib/php:../../../library/");
ولاختباره، يمكنك تشغيل الإصدار التجريبي من جداول البيانات عن طريق إدخاله في سطر الأوامر في مجلد العروض التوضيحية/Zend/Gdata:
php Spreadsheet-ClientLogin.php --user=YourGMailUsername --pass=YourPassword
وإذا نجح الأمر، فمن المفترض أن تشاهد قائمة بجداول البيانات المعروضة. إذا ظهرت لك رسالة خطأ، تحقَّق من ضبط مسار التضمين بشكل صحيح ومن تثبيت PHP 5.
إنشاء دوال عمومية
وستستخدم جميع النصوص البرمجية بلغة PHP التي سنقوم بكتابتها لخريطة المنتدى عمليات التضمين والمتغيرات والدوال الشائعة، والتي سنضعها في ملف واحد.
في بداية الملف، ستكون لدينا العبارات اللازمة لتضمين وتحميل مكتبة Zend، المأخوذة من مثال جداول البيانات.
ثم سنحدد الثوابت التي سيتم استخدامها عبر الملفات: مفتاح جدول البيانات ومعرفا ورقة العمل. للعثور على معلومات جدول البيانات، افتحه وانقر على علامة التبويب "نشر"، ثم انقر على "المزيد من خيارات النشر". حدد "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 من مثال جداول بيانات العميل-تسجيل الدخول.وقد تكون مفيدة لك لتصحيح الأخطاء. ستتم إزالة العنصر من الخلاصة ثم طباعته على الشاشة.
تظهر 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. وبعد ذلك، يتم إعداد برنامج جداول بيانات، وطلب خلاصة قائمة لورقة عمل المستخدمين باستخدام سلسلة طلب بحث لقصر النتائج على الصفوف فقط حيث يساوي عمود اسم المستخدم اسم المستخدم الذي تم تمريره إلى النص البرمجي. وإذا لم نحصل على أي صفوف في نتيجة خلاصة القائمة، يمكننا حينئذٍ المتابعة بأمان مع معرفة أن اسم المستخدم الذي تم إدخاله فريد. قبل إدراج صف في خلاصة القوائم، ننشئ مصفوفة مرتبطة لقيم العمود: اسم المستخدم، وتشفير كلمة المرور باستخدام دالة 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!"; } ?>
في صفحة التسجيل، يمكننا تضمين 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. وبعد ذلك، يتم إعداد برنامج جداول بيانات، وطلب خلاصة قائمة لورقة عمل المستخدمين باستخدام سلسلة طلب بحث لقصر النتائج على الصفوف فقط حيث يساوي عمود اسم المستخدم اسم المستخدم الذي تم تمريره إلى النص البرمجي.
في الصف الذي يتم عرضه، سنتحقق من أن تجزئة كلمة المرور التي تم تمريرها تتطابق مع التجزئة المخزنة في جدول البيانات. إذا كان الأمر كذلك، فسنعمل على إنشاء معرّف جلسة باستخدام الدوال 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"]; } } } ?>
في صفحة تسجيل الدخول، يمكننا مرة أخرى تضمين API للخرائط بحيث يمكننا استخدام دالة تضمين XMLHttpRequest التي تسمى GDownloadUrl. عندما ينقر المستخدم على الزر "إرسال"، سنحصل على اسم المستخدم وكلمة المرور من حقول النص، وننشئ عنوان URL للنص البرمجي مع معلمات طلب البحث، ونطلب GDownloadUrl من خلال عنوان URL للنص البرمجي. في دالة رد الاتصال، سيتم تعيين ملف تعريف ارتباط مع معرّف الجلسة الذي يعرضه النص البرمجي، أو إخراج رسالة خطأ إذا لم يتم عرض أي منها. تأتي دالة setCookie من ملفات تعريف الارتباط التي تستند إلى برنامج JavaScript w3c جافا سكريبت: 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. وبعد ذلك، يتم إعداد برنامج جداول بيانات، وطلب خلاصة قائمة لورقة عمل المستخدمين باستخدام سلسلة طلب بحث لقصر النتائج على هذه الصفوف فقط حيث يساوي عمود الجلسة قيمة الجلسة التي تم تمريرها إلى النص البرمجي. بعد ذلك نعيد إدخال الإدخالات المخصصة لتلك الخلاصة (وهي الإدخالات المقابلة لرؤوس الأعمدة الخاصة بنا)، ونطبع اسم المستخدم المقابل لهذه الجلسة في حال توفره.
لغة 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. بعد ذلك، يتم إخراج "Success" إذا تمت إضافة صف للموقع الجديد إلى جدول البيانات. إذا كانت تظهر لك رسالة خطأ في هذه الخطوة، قد يرجع ذلك إلى عدم تطابق في أسماء رؤوس الأعمدة. يجب أن تتطابق المفاتيح في الصفيف المرتبط مع رؤوس الأعمدة في ورقة البيانات التي يحدِّدها مفتاح جدول البيانات ورقم تعريف ورقة العمل.
لغة 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"; } } ?>
في صفحة إضافة الموقع، يمكننا تضمين API للخرائط مرة أخرى بحيث يمكننا استخدام GDownloadUrl وإنشاء خريطة. بعد تحميل الصفحة، نستخدم دالة getCookie من ملفات تعريف الارتباط، لاسترداد قيمة الجلسة. إذا كانت سلسلة الجلسة فارغة أو فارغة، يتم إخراج رسالة خطأ. وإذا لم يكن الأمر كذلك، سنتصل بـ GDownloadUrl على map.checksession.php، مع إرسال الجلسة. وإذا نجح ذلك في عرض اسم مستخدم، فإننا نعرض رسالة ترحيب للمستخدم، ونكشف عن نموذج إضافة موقع، ونحمّل الخريطة فيه. يتكون النموذج من حقل نص عنوان وخريطة وحقول نصية لاسم المكان وخط العرض وخط الطول. إذا كان المستخدم لا يعرف فعليًا خط العرض/خط الطول للموقع الجغرافي، يمكنه ترميزه جغرافيًا بإدخال عنوانه في النموذج والضغط على "إرسال". سيؤدي هذا إلى إرسال استدعاء إلى GClientGeocoder لواجهة برمجة تطبيقات الخريطة، والذي سيضع محدّد موقع على الخريطة إذا عثر على العنوان، ويملأ تلقائيًا حقول النص خط العرض/خط الطول.
عندما يكون المستخدم راضيًا، يمكنه الضغط على الزر "إضافة موقع". بعد ذلك، في 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>
إنشاء الخريطة
نظرًا لأنك جعلت ورقة عمل المواقع عامة في الخطوة الأولى، فليس هناك برمجة من جانب الخادم مطلوبة لإنشاء خريطة لها. في الواقع، لا يلزم أي برمجة على الإطلاق. يمكنك استخدام جداول البيانات -> معالج الخرائط، وسيؤدي هذا إلى إنشاء كل الرموز المطلوبة للخريطة. ينزّل المعالج إدخالات ورقة البيانات في الصفحة من خلال إلحاق علامة نص برمجي تشير إلى مخرجات JSON للخلاصة، كما تحدّد دالة رد اتصال يتم استدعاؤها عند تنزيل JSON. يمكنك الحصول على مزيد من المعلومات هنا.
نموذج رمز HTML للقيام بذلك متاح هنا: mainmap.htm. يتم عرض لقطة شاشة أدناه:

الخاتمة
نأمل أن يكون لديك الآن نظام خرائط خاص بك يساهم به المستخدمون على خادمك. توفر هذه المقالة الشفرة الأساسية جدًا واللازمة للجوانب الأساسية من هذا النظام، ولكن الآن بعد أن تعرَّفت على مكتبة جداول بيانات Zend، من المفترض أن تتمكن من توسيع النظام لتلبية احتياجاتك الخاصة. إذا واجهت أي أخطاء خلال هذه العملية، فتذكر أنه يمكنك استخدام الأمر echo
في PHP أو واجهة برمجة تطبيقات الخرائط GLog.write()
في جافا سكريبت لتصحيح الأخطاء، ويمكنك دومًا النشر في منتديات API للخرائط أو واجهة برمجة التطبيقات لجداول البيانات للحصول على مساعدة إضافية.