November 2007
Tujuan
Web penuh dengan komunitas yang berpusat pada geografi dan minat: orang yang menyukai museum, katedral Eropa, taman negara bagian, dll. Jadi, selalu ada kebutuhan akan developer (seperti Anda!) untuk membuat sistem tempat pengguna dapat menyumbangkan tempat yang diberi geotag ke peta, dan itulah yang akan kita lakukan di sini. Di akhir artikel ini, Anda akan memiliki sistem tempat pengguna dapat mendaftar, login, dan menambahkan tempat yang diberi geotag. Sistem akan menggunakan AJAX untuk front-end, PHP untuk pembuatan skrip sisi server, dan Google Spreadsheet untuk penyimpanan. Jika terbiasa menggunakan database MySQL untuk penyimpanan, Anda dapat dengan mudah mengubah kode di sini untuk menggunakan backend database MySQL.
Artikel ini dibagi menjadi langkah-langkah berikut:
- Menyiapkan Spreadsheet
- Bekerja dengan Zend Gdata Framework
- Membuat Fungsi Global
- Mendaftarkan Pengguna Baru
- Login Pengguna
- Mengizinkan Pengguna Menambahkan Tempat Peta
- Membuat Peta
- Kesimpulan
Menyiapkan Spreadsheet
Kita akan menggunakan Google Spreadsheet untuk menyimpan semua data sistem ini. Ada dua jenis data yang perlu kita simpan: informasi akun pengguna dan tempat yang ditambahkan pengguna, jadi kita akan membuat satu lembar kerja untuk setiap jenis data. Kita akan berinteraksi dengan lembar kerja menggunakan feed daftar, yang mengandalkan baris pertama dalam lembar kerja yang berisi label kolom, dan setiap baris berikutnya berisi data.
Buka docs.google.com, lalu buat spreadsheet baru. Ganti nama sheet default menjadi "Pengguna", lalu buat kolom bernama "pengguna", "sandi", dan "sesi". Kemudian, tambahkan sheet lain, ganti namanya menjadi "Locations", dan buat kolom bernama "user", "status", "lat", "lng", dan "date". Atau, jika Anda tidak ingin melakukan semua pekerjaan manual tersebut, download template ini dan impor ke Google Spreadsheet melalui perintah File->Impor.
Informasi akun pengguna harus dijaga kerahasiaannya (hanya dapat dilihat oleh pemilik spreadsheet, yaitu Anda), sementara tempat yang ditambahkan pengguna akan ditampilkan di peta yang dapat dilihat secara publik. Untungnya, Google Spreadsheet memungkinkan Anda memutuskan secara selektif lembar kerja mana dalam spreadsheet yang dapat disetel ke publik dan mana yang harus tetap bersifat pribadi (default). Untuk memublikasikan lembar kerja "Lokasi", klik tab "Publikasikan", klik "Publikasikan sekarang", centang kotak "Publikasikan ulang secara otomatis", lalu di drop-down "Bagian mana?", pilih "Hanya Lembar 'Lokasi'". Opsi yang benar ditampilkan dalam screenshot di bawah:
Bekerja dengan Zend GData Framework
Google Spreadsheet API menyediakan antarmuka HTTP untuk operasi CRUD seperti mengambil baris, menyisipkan baris, memperbarui baris, dan menghapus baris. Zend Framework menyediakan wrapper PHP di atas API (dan GData API lainnya) sehingga Anda tidak perlu khawatir tentang penerapan operasi HTTP mentah. Zend Framework memerlukan PHP 5.
Jika Anda belum memilikinya, download framework Zend dan upload ke server Anda. Framework tersedia di sini: http://framework.zend.com/download/gdata.
Anda harus mengubah include_path PHP untuk menyertakan library Zend. Ada beberapa cara untuk melakukannya, bergantung pada tingkat hak administrasi yang Anda miliki di server. Salah satu caranya adalah dengan menambahkan baris ini di atas pernyataan require dalam file PHP apa pun yang menggunakan library:
ini_set("include_path", ".:/usr/lib/php:/usr/local/lib/php:../../../library/");
Untuk mencobanya, jalankan demo Spreadsheet dengan memasukkan perintah ini di command line dalam folder demos/Zend/Gdata:
php Spreadsheet-ClientLogin.php --user=YourGMailUsername --pass=YourPassword
Jika berhasil, Anda akan melihat daftar spreadsheet Anda ditampilkan. Jika Anda menerima pesan error, periksa apakah jalur include Anda telah disetel dengan benar dan Anda telah menginstal PHP 5.
Membuat Fungsi Global
Semua skrip PHP yang akan kita tulis untuk Peta Komunitas akan menggunakan include, variabel, dan fungsi umum, yang akan kita masukkan ke dalam satu file.
Di awal file, kita akan memiliki pernyataan yang diperlukan untuk menyertakan dan memuat library Zend, yang diambil dari contoh Spreadsheets-ClientLogin.php.
Kemudian, kita akan menentukan konstanta yang akan digunakan di seluruh file: kunci spreadsheet dan dua ID worksheet. Untuk menemukan informasi spreadsheet Anda, buka spreadsheet, klik "tab Publikasikan", lalu klik "Opsi publikasi lainnya". Pilih "ATOM" dari daftar drop-down Format File, lalu klik "Buat URL". Anda akan melihat sesuatu seperti:
http://spreadsheets.google.com/feeds/list/o16162288751915453340.4016005092390554215/od6/public/basic
Kunci spreadsheet adalah string alfanumerik panjang setelah "/list/," dan ID lembar kerja adalah string panjang 3 karakter setelahnya. Untuk menemukan ID lembar kerja lainnya, pilih sheet lain dari drop-down "Sheet Mana?".
Kemudian, kita akan membuat 3 fungsi: setupClient, getWkshtListFeed, dan printFeed. Di setupClient, kita akan menyetel nama pengguna dan sandi GMail, melakukan autentikasi dengan ClientLogin, dan menampilkan objek Zend_Gdata_Spreadsheets. Di getWkshtListFeed, kita akan menampilkan feed daftar Spreadsheet untuk kunci spreadsheet dan ID lembar kerja tertentu, dengan kueri spreadsheet opsional (link). Fungsi printFeed diambil dari contoh Spreadsheets-ClientLogin.php, dan mungkin berguna bagi Anda untuk men-debug. Fungsi ini akan mengambil objek feed dan mencetaknya ke layar.
PHP yang melakukan hal ini ditampilkan di bawah (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++;
}
}
?>
Mendaftarkan Pengguna Baru
Untuk mendaftarkan pengguna baru, kita memerlukan halaman HTML yang ditampilkan kepada pengguna dengan kolom teks dan tombol kirim, serta skrip backend PHP untuk menambahkan pengguna ke spreadsheet.
Dalam skrip PHP, kita menyertakan skrip global terlebih dahulu, lalu mendapatkan nilai nama pengguna dan sandi dari variabel GET. Kemudian, kita menyiapkan klien Spreadsheet, dan meminta feed daftar untuk worksheet pengguna dengan string kueri untuk membatasi hasil hanya pada baris tempat kolom nama pengguna sama dengan nama pengguna yang diteruskan ke skrip. Jika tidak ada baris dalam hasil feed daftar, kita dapat melanjutkan dengan aman karena mengetahui bahwa nama pengguna yang diteruskan bersifat unik. Sebelum menyisipkan baris dalam feed daftar, kita membuat array asosiatif nilai kolom: nama pengguna, enkripsi sandi menggunakan fungsi sha1 PHP, dan karakter pengisi untuk sesi. Kemudian, kita memanggil insertRow di klien spreadsheet, dengan meneruskan array asosiatif, kunci spreadsheet, dan ID worksheet. Jika objek yang ditampilkan adalah ListFeedEntry, kita akan menampilkan pesan Success!.
PHP yang melakukan hal ini ditampilkan di bawah (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!";
}
?>
Di halaman pendaftaran, kita dapat menyertakan Maps API sehingga kita dapat menggunakan fungsi wrapper XMLHttpRequest-nya yang disebut GDownloadUrl. Saat pengguna mengklik tombol kirim, kita akan mendapatkan nama pengguna dan sandi dari kolom teks, membuat string parameter dari nilainya, dan memanggil GDownloadUrl di URL dan parameter skrip. Karena kita mengirim informasi sensitif, kita menggunakan GDownloadUrl versi HTTP POST (dengan mengirim parameter sebagai argumen ketiga, bukan menambahkannya ke URL). Dalam fungsi callback, kita akan memeriksa respons yang berhasil dan menampilkan pesan yang sesuai kepada pengguna.
Screenshot dan kode ditampilkan di bawah untuk halaman pendaftaran contoh (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>
Login Pengguna
Untuk mengizinkan pengguna login ke sistem kami, kita memerlukan halaman HTML yang ditampilkan kepada pengguna untuk meminta nama pengguna dan sandi mereka, serta skrip PHP untuk memverifikasi informasi login, membuat ID sesi, dan meneruskannya kembali ke halaman login untuk menyetel cookie. Pengguna akan tetap login melalui cookie sesi di halaman berikutnya.
Dalam skrip PHP, kita menyertakan skrip global terlebih dahulu, lalu mendapatkan nilai nama pengguna dan sandi dari variabel GET. Kemudian, kita menyiapkan klien Spreadsheet, dan meminta feed daftar untuk worksheet pengguna dengan string kueri untuk membatasi hasil hanya pada baris tempat kolom nama pengguna sama dengan nama pengguna yang diteruskan ke skrip.
Di baris yang ditampilkan, kita akan memeriksa apakah hash sandi yang diteruskan cocok dengan hash yang disimpan di spreadsheet. Jika ya, kami akan membuat ID sesi menggunakan fungsi md5, uniqid, dan rand. Kemudian, kita akan memperbarui baris di spreadsheet dengan sesi, dan menampilkannya ke layar jika pembaruan baris berhasil.
PHP yang melakukannya ditampilkan di bawah (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"];
}
}
}
?>
Di halaman login, kita dapat menyertakan Maps API lagi agar dapat menggunakan fungsi wrapper XMLHttpRequest-nya yang disebut GDownloadUrl. Saat pengguna mengklik tombol kirim, kita akan mendapatkan nama pengguna dan sandi dari kolom teks, membuat URL skrip dengan parameter kueri, dan memanggil GDownloadUrl di URL skrip. Dalam fungsi callback, kita akan menetapkan cookie dengan ID sesi yang ditampilkan oleh skrip, atau menampilkan pesan error jika tidak ada yang ditampilkan. Fungsi setCookie berasal dari cookies.js yang didasarkan pada tutorial JavaScript w3c: http://www.w3schools.com/js/js_cookies.asp.
Screenshot dan kode ditampilkan di bawah untuk contoh halaman login (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>
Mengizinkan Pengguna Menambahkan Tempat Peta
Untuk mengizinkan pengguna menambahkan tempat ke peta kami, kita memerlukan halaman HTML yang ditampilkan kepada pengguna agar mereka dapat memberikan informasi tentang lokasi, dan dua skrip PHP - satu untuk memeriksa apakah mereka login melalui cookie yang kita tetapkan, dan satu lagi untuk menambahkan lokasi ke worksheet lokasi.
Dalam skrip PHP pertama yang memeriksa apakah pengguna login, kita akan menyertakan skrip global terlebih dahulu, lalu mendapatkan nilai sesi dari variabel GET. Kemudian, kita menyiapkan klien Spreadsheet, dan meminta feed daftar untuk worksheet pengguna dengan string kueri untuk membatasi hasil hanya pada baris yang kolom sesi sama dengan nilai sesi yang diteruskan ke dalam skrip. Kemudian, kita melakukan iterasi pada entri kustom feed tersebut (yang sesuai dengan header kolom), dan mencetak nama pengguna yang sesuai untuk sesi tersebut jika ada.
PHP yang melakukannya ditampilkan di bawah (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();
}
}
}
?>
Dalam skrip PHP kedua yang memungkinkan pengguna menambahkan lokasi, kita terlebih dahulu mereplikasi kode dari communitymap_checksession.php, untuk memastikan pengguna masih login dan valid. Kemudian, setelah mendapatkan kembali nama pengguna yang valid dari sheet pengguna, kita akan mendapatkan nilai tempat, lat, dan lng dari variabel GET. Kita memasukkan semua nilai tersebut ke dalam array asosiatif, dan kita juga menambahkan nilai "date" menggunakan fungsi date() PHP, sehingga kita tahu kapan pengguna menambahkan tempat tersebut. Kita meneruskan array asosiatif tersebut, konstanta kunci spreadsheet, dan konstanta ID lembar kerja lokasi ke dalam fungsi insertRow. Kemudian, kita akan menampilkan "Success" jika baris untuk lokasi baru ditambahkan ke spreadsheet. Jika Anda mendapatkan error pada langkah ini, kemungkinan karena ketidakcocokan nama header kolom. Kunci dalam array asosiatif harus cocok dengan header kolom dalam lembar kerja yang ditentukan oleh kunci spreadsheet dan ID lembar kerja.
PHP yang melakukan hal tersebut ditampilkan di bawah (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";
}
}
?>
Di halaman tambahkan lokasi, kita dapat menyertakan Maps API lagi sehingga kita dapat menggunakan GDownloadUrl dan membuat peta. Setelah halaman dimuat, kita menggunakan fungsi getCookie dari cookies.js untuk mengambil nilai sesi. Jika string sesi adalah null atau kosong, kita akan menampilkan pesan error. Jika tidak, kita akan memanggil GDownloadUrl di map.checksession.php, dengan mengirimkan sesi. Jika berhasil menampilkan nama pengguna, kita akan menampilkan pesan selamat datang kepada pengguna, menampilkan formulir tambahkan lokasi, dan memuat peta. Formulir ini terdiri dari kolom teks alamat, peta, dan kolom teks untuk nama tempat, lintang, dan bujur. Jika pengguna belum mengetahui lintang/bujur lokasi, mereka dapat melakukan geocode dengan memasukkan alamat di formulir dan menekan "kirim". Tindakan ini akan mengirimkan panggilan ke GClientGeocoder Map API, yang akan menempatkan penanda di peta jika menemukan alamat, dan mengisi otomatis kolom teks lat/lng.
Setelah puas, pengguna dapat menekan tombol "tambahkan lokasi". Kemudian, di JavaScript, kita akan mendapatkan nilai untuk user, place, lat, dan lng, lalu mengirimkannya ke skrip communitymap_addlocation.php dengan GDownloadUrl.
Jika skrip tersebut berhasil, kita akan menampilkan pesan keberhasilan ke layar.
Screenshot dan kode ditampilkan di bawah untuk contoh halaman tambahkan lokasi (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>
Membuat Peta
Karena Anda membuat lembar kerja lokasi menjadi publik pada langkah pertama, tidak ada pemrograman sisi server yang diperlukan untuk membuat peta lokasi tersebut. Bahkan, tidak ada pemrograman yang diperlukan sama sekali. Anda dapat menggunakan Spreadsheet -> wizard Peta ini, dan wizard akan membuat semua kode yang diperlukan untuk peta. Wizard mendownload entri lembar kerja ke halaman dengan menambahkan tag skrip yang mengarah ke output JSON untuk feed, dan menentukan fungsi callback yang dipanggil setelah JSON didownload. Informasi selengkapnya tersedia di sini.
Contoh kode HTML untuk melakukannya tersedia di sini: mainmap.htm. Screenshot ditampilkan di bawah:
Kesimpulan
Semoga, Anda kini memiliki sistem peta yang dibuat pengguna sendiri yang berjalan di server Anda. Artikel ini menyediakan kode yang sangat mendasar yang diperlukan untuk aspek penting sistem ini, tetapi setelah Anda memahami library Zend Spreadsheets, Anda akan dapat memperluas sistem untuk memenuhi kebutuhan khusus Anda. Jika Anda mengalami error selama proses, ingatlah bahwa Anda dapat menggunakan perintah echo di PHP atau GLog.write() Map API di JavaScript untuk men-debug, dan Anda selalu dapat memposting di forum developer Maps API atau Spreadsheets API untuk mendapatkan bantuan tambahan.