Kasım 2007
Hedef
Web'de, coğrafyalar ve ilgi alanları merkezli topluluklar bulunur: müzeler, Avrupa katedralleri, eyalet parkları gibi yerlerde yaşayan kişiler. Bu nedenle, geliştiricilerin coğrafi etiketleme yapılan yerlerin haritaya katkıda bulunabileceği bir sistem oluşturmaları gerekir (sizin gibi!). Bu makalenin sonunda, kullanıcıların kaydolabileceği, giriş yapabileceği ve coğrafi etiketli yerler ekleyebileceği bir sisteme sahip olursunuz. Sistem, kullanıcı arabirimi için AJAX'ı, sunucu tarafı komut dosyaları için PHP'yi ve depolama için Google E-Tablolar'ı kullanır. Depolama için MySQL veritabanlarını kullanmaya alışıksanız buradaki kodu, MySQL veritabanı arka ucunu kullanacak şekilde kolayca değiştirebilirsiniz.
Bu makale aşağıdaki adımlara ayrılmıştır:
- E-tabloyu ayarlama
- Zend Gdata Çerçevesi ile çalışma
- Genel İşlevler Oluşturma
- Yeni bir kullanıcıyı kaydettirme
- Kullanıcıya Giriş Yapma
- Kullanıcıların Harita Yeri Eklemesine İzin Verme
- Haritayı Oluşturma
- Sonuç
E-tabloyu ayarlama
Bu sisteme ait tüm verileri depolamak için Google E-Tablolar'ı kullanacağız. Depoladığımız iki tür veri vardır: kullanıcı hesabı bilgileri ve kullanıcı tarafından eklenen yerler. Bu nedenle, her veri türü için bir çalışma sayfası oluşturacağız. Bir çalışma sayfasındaki sütun etiketlerini içeren ilk satıra ve daha sonra veri içeren her satıra bağlı olarak, çalışma sayfalarıyla liste feed'lerini kullanarak etkileşim kuracağız.
docs.google.com adresini ziyaret edin ve yeni bir e-tablo oluşturun. Varsayılan çalışma sayfasını "Kullanıcılar" olarak yeniden adlandırın ve "kullanıcı", "şifre" ve "oturum" adlı sütunlar oluşturun. Ardından başka bir sayfa ekleyin, sayfayı "Konumlar" olarak yeniden adlandırın ve "kullanıcı", "durum", "lat", "lng" ve "tarih" adlı sütunlar oluşturun. İsterseniz, bu manuel çalışmalarla ilgileniyorsanız Bu şablonu indirin ve File->Import komutuyla Google E-Tablolar'a aktarın.
Kullanıcı tarafından eklenen yerler herkese açık bir harita üzerinde gösterilirken, kullanıcı hesabı bilgileri gizli tutulmalıdır (yalnızca e-tablonun sahibi siz görebilirsiniz). Neyse ki Google E-Tablolar, bir e-tablodaki hangi çalışma sayfalarının herkese açık olabileceğine ve hangilerinin gizli kalması gerektiğine (varsayılan) seçici bir şekilde karar vermenize olanak tanır. "Konumlar" çalışma sayfasını yayınlamak için "Yayınla" sekmesini tıklayın, "Şimdi yayınla"yı tıklayın, "Otomatik olarak yeniden yayınla" onay kutusunu işaretleyin ve "Hangi bölümler?" açılır menüsünde "Yalnızca "Yerler" sayfasını seçin. Aşağıdaki ekran görüntüsünde doğru seçenekler gösterilmektedir:
Zend GData Framework ile çalışma
Google Sheets API, satır alma, satır ekleme, satır güncelleme ve satır silme gibi CRUD işlemleri için bir HTTP arayüzü sağlar. Zend Framework, API'nin (ve diğer GData API'lerinin) üst kısmına bir PHP sarmalayıcısı sağlar. Böylece ham HTTP işlemlerini uygulamayla ilgili endişelenmeniz gerekmez. Zend Framework için PHP 5 gerekir.
Henüz yoksa Zend çerçevesini indirin ve sunucunuza yükleyin. Çerçeveyi şu adreste bulabilirsiniz: http://framework.zend.com/download/gdata.
PHP dahil__ yolunuzu Zend kitaplığını içerecek şekilde değiştirmeniz gerekir. Sunucunuzdaki haklarınızın düzeyine bağlı olarak, bunu yapmanın birkaç yolu vardır. Birinci yöntem, kitaplığı kullanan tüm PHP dosyalarında gerekli ifadelerin üzerine eklemektir:
ini_set("include_path", ".:/usr/lib/php:/usr/local/lib/php:../../../library/");
Bu özelliği test etmek için demolar/Zend/Gdata klasörünün komut satırına aşağıdakini girerek E-Tablolar demosunu çalıştırın:
php Spreadsheet-ClientLogin.php --user=YourGMailUsername --pass=YourPassword
Çalışıyorsa e-tablolarınızın listesini görmeniz gerekir. Hata alırsanız ekleme yolunuzun doğru şekilde ayarlandığından ve PHP 5'in yüklü olduğundan emin olun.
Global İşlevler Oluşturma
Topluluk Haritası için yazacağımız tüm PHP komut dosyalarında, yaygın olarak kullanılan değişkenler, değişkenler ve işlevler kullanılacak. Bu dosyaları tek bir dosyaya ekleyeceğiz.
Dosyanın başında, E-tablolar-ClientLogin.php örneğinden alınan Zend kitaplığını eklemek ve yüklemek için gerekli ifadeler olacaktır.
Ardından, dosyalar genelinde kullanılacak sabit değerleri tanımlayacağız: e-tablo anahtarı ve iki çalışma sayfası kimliği. E-tablonuzdaki bilgileri bulmak için e-tabloyu açın, "Yayınla" sekmesini ve ardından "Diğer yayınlama seçenekleri"ni tıklayın. Dosya Biçimi açılır listesinden "ATOM"u seçin ve "URL oluştur"u tıklayın. Aşağıdaki gibi bir şey görürsünüz:
http://spreadsheets.google.com/feeds/list/o16162288751915453340.4016005092390554215/od6/public/basic
E-tablo anahtarı "/list/" kısmından sonraki uzun alfanümerik dizedir. Çalışma sayfası kimliği ise bunun ardından gelen 3 karakterli uzun dizedir. Diğer çalışma sayfası kimliğini bulmak için "Hangi Sayfalar?" açılır menüsünden diğer sayfayı seçin.
Ardından 3 işlev oluşturacağız: setClient, getWkshtListFeed ve PrintFeed. SetupClient'ta GMail kullanıcı adı ve şifremizi belirleyip ClientLogin ile kimlik doğrulaması gerçekleştirecek ve bir Zend_Gdata_spreadsheets nesnesi döndüreceğiz. getWkshtListFeed'de, belirli bir e-tablo anahtarı ve çalışma sayfası kimliği için isteğe bağlı e-tablo sorgusu (bağlantı) ile birlikte bir E-tablo liste feed'i döndüreceğiz. PrintFeed işlevi, Sheets-ClientLogin.php örneğinden alınmıştır ve hata ayıklama açısından sizin için yararlı olabilir. Bu işlem feed nesnesini alır ve ekrana yazdırır.
Bunu yapan PHP aşağıda gösterilmiştir (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++;
}
}
?>
Yeni Kullanıcı Kaydetme
Yeni bir kullanıcıyı kaydetmek için kullanıcıya metin alanları ve gönder düğmesi içeren bir HTML sayfası ve kullanıcıyı e-tabloya eklemek için bir PHP arka uç komut dosyası isteriz.
PHP komut dosyasına önce genel komut dosyasını ekleyip ardından GET değişkeninden kullanıcı adı ve şifre değerlerini alırız. Ardından bir E-Tablolar istemcisi oluşturduk ve sonuçları yalnızca kullanıcı adı sütununun komut dosyasına geçirilen kullanıcı adına eşit olduğu satırlarla kısıtlayan bir sorgu dizesiyle kullanıcılar çalışma sayfası için liste feed'ini istedik. Liste feed'i sonucunda herhangi bir satır bulunamazsa, iletilen kullanıcı adının benzersiz olduğunu bilerek güvenle işlem yapabiliriz. Liste feed'ine bir satır eklemeden önce sütun değerlerinden oluşan, ilişkilendirme amaçlı bir dizi oluştururuz: kullanıcı adı, PHP'nin sha1 işlevini kullanarak şifrenin şifrelemesi ve oturum için bir dolgu karakteri. Ardından, e-tablolar istemcisinde ilişkilendirme satırı, e-tablolar anahtarı ve çalışma sayfası kimliğini ekleyerek insertRow adını veririz. Döndürülen nesne bir ListFeedEntry ise bir Başarılı! mesajı oluştururuz.
Bunu yapan PHP aşağıda gösterilmiştir (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!";
}
?>
Kayıt sayfasında, Maps API'yi dahil edebilmemiz için Maps API'yi de kullanabiliriz. Bu API'nin GDownloadUrl adlı XMLHttpRequest sarmalayıcısı işlevini kullanabiliriz. Kullanıcı, gönder düğmesini tıkladığında metin alanlarından kullanıcı adını ve şifreyi alıp değerlerinden bir parametre dizesi oluşturur, komut dosyası URL'sinde ve parametrelerinde GDownloadUrl'yi çağırırız. Hassas bilgileri gönderdiğimizden GDownloadUrl'nin HTTP POST sürümünü kullanıyoruz (parametreleri URL'ye eklemek yerine üçüncü bağımsız değişken olarak göndererek). Geri çağırma işlevinde, başarılı bir yanıt olup olmadığı kontrol edilir ve kullanıcıya uygun bir mesaj gönderilir.
Örnek kayıt sayfası (communitymap_register.htm) için bir ekran görüntüsü ve kod gösterilmektedir:
<!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>
Kullanıcıya Giriş Yapma
Kullanıcıların sistemimizde oturum açabilmeleri için kullanıcı adlarını ve şifrelerini girmelerini isteyen, kullanıcıya yönelik bir HTML sayfasının ve giriş bilgilerini doğrulamak için bir PHP komut dosyasının, oturum kimliği oluşturulmasını ve çerez ayarlamak için giriş sayfasına geri aktarılmasını istiyoruz. Kullanıcı, sonraki sayfalarda oturum çerezi aracılığıyla giriş yapmış olarak kalır.
PHP komut dosyasına önce genel komut dosyasını ekleyip ardından GET değişkeninden kullanıcı adı ve şifre değerlerini alırız. Ardından bir E-Tablolar istemcisi oluşturduk ve sonuçları yalnızca kullanıcı adı sütununun komut dosyasına geçirilen kullanıcı adına eşit olduğu satırlarla kısıtlayan bir sorgu dizesiyle kullanıcılar çalışma sayfası için liste feed'ini istedik.
Döndürülen satırda, iletilen şifrenin karmasının e-tabloda depolanan karma ile eşleşip eşleşmediğini kontrol ederiz. Öyleyse md5, uniqid ve rand işlevlerini kullanarak bir oturum kimliği oluştururuz. Ardından, e-tablodaki satırı oturumla günceller ve satır güncellemesi başarılı olursa ekranı ekrana çıkarırız.
Bunu yapan PHP aşağıda gösterilmiştir (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"];
}
}
}
?>
Giriş sayfasında, Maps API'nin GDownloadUrl adlı XMLHttpRequest sarmalayıcı işlevini kullanabilmemiz için tekrar dahil edebiliriz. Kullanıcı, gönder düğmesini tıkladığında metin alanlarından kullanıcı adını ve şifreyi alıp komut dosyası URL'sini sorgu parametreleriyle oluşturur ve komut dosyası URL'sinde GDownloadUrl'yi çağırırız. Geri çağırma işlevinde, komut dosyası tarafından döndürülen oturum kimliğine sahip bir çerez oluşturur veya komut dosyası döndürülmezse bir hata mesajı döndürür. setCookie işlevi, http://www.w3schools.com/js/js_cookies.asp w3c JavaScript eğitimini temel alan bir çerez.js'den gelir.
Örnek bir giriş sayfası (communitymap_login.htm) için ekran görüntüsü ve kod aşağıda verilmiştir:
<!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>
Kullanıcıların Harita Yerleri Eklemesine İzin Verme
Bir kullanıcının haritamıza yer eklemesine izin vermek için, kullanıcıya yönelik bir HTML sayfasının konum hakkında bilgi sağlamasına izin veririz. İki komut dosyası da, biri kullanıcının belirlediği çerezle giriş yapıp yapmadığını kontrol etmek, diğeri ise konumlar çalışma sayfasına eklemek için iki komut dosyası içerir.
Bir kullanıcının giriş yapıp yapmadığını kontrol eden ilk PHP komut dosyasına, önce genel komut dosyasını ekler ve ardından GET değişkeninden oturum değerini alırız. Ardından bir E-Tablolar istemcisi oluşturur ve sonuçları yalnızca sorgu sütununun komut dosyasına geçirilen oturum değerine eşit olduğu satırlarla sınırlandıran bir sorgu dizesiyle kullanıcı çalışma sayfası için liste feed'ini isteriz. Ardından o feed'in özel girişlerini (sütun başlıklarımıza karşılık gelenler) tekrar tarar ve varsa bu oturuma karşılık gelen kullanıcı adını yazdırırız.
Bunu yapan PHP aşağıda gösterilmiştir (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();
}
}
}
?>
Bir kullanıcının konum eklemesine izin veren ikinci PHP komut dosyasında, kullanıcının yine de giriş yaptığını ve geçerli olduğundan emin olmak için ilk olarak topluluğu eşleme_kontrolü.html'den alınan kodu çoğaltırız. Ardından, kullanıcılar sayfasından geçerli bir kullanıcı adı aldığımızda GET değişkeninden yerle, lat ve lng değerlerini alırız. Tüm bu değerleri ilişkilendirilebilir bir diziye koyarız ve ayrıca, kullanıcının yeri ne zaman eklediğini bilmemiz için PHP'nin date() işlevini kullanarak bir "date" değeri ekleriz. Bu ilişkisel diziyi, e-tablolar anahtar sabit değerini ve konumlar çalışma sayfası kimliği sabitini insertRow işlevine iletiriz. Daha sonra, e-tabloya yeni konum satırı eklenirse "Başarılı" sonucunu alırız. Bu adımda hata alıyorsanız bunun nedeni sütun başlığı adlarındaki uyuşmazlıktır. İlişkisel dizideki anahtarlar, e-tablo anahtarı ve çalışma sayfası kimliği tarafından belirtilen çalışma sayfasındaki sütun başlıklarıyla eşleşmelidir.
Bunu yapan PHP aşağıda gösterilmiştir (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";
}
}
?>
Konum indirme sayfasında, GDownloadUrl'yi kullanmak ve harita oluşturmak için yine Maps API'yi ekleyebiliriz. Sayfa yüklendikten sonra oturum değerini almak içincookie.js'deki getCookie işlevini kullanırız. Oturum dizesi boş veya boşsa hata mesajı göndeririz. Yoksa, Map.checksession.pdf adresindeki GDownloadUrl çağrısını yaparak oturumu gönderin. Bu şekilde bir kullanıcı adı başarılı bir şekilde döndürülürse kullanıcıya bir karşılama mesajı gösterilir, konum ekleme formu gösterilir ve harita yüklenir. Form; yer adı, enlem ve boylam için bir adres metni alanı, harita ve metin alanlarından oluşur. Kullanıcı, konumun enlem/boylamını henüz bilmiyorsa adresini girerek ve "gönder"e basarak coğrafi kodlama yapabilir. Bu, Map API'nin GClientGeocoder aracına bir çağrı gönderir ve bu adres adresi bulduğunda haritaya bir işaretçi yerleştirir ve enl/boylam metin alanlarını otomatik olarak doldurur.
Kullanıcı memnun olduğunda "konum ekle" düğmesine basabilir. Ardından, JavaScript'te kullanıcı, yer, lat ve lng değerlerini alır ve GDownloadUrl ile topluluk eşlemesi.addlocation.php komut dosyasına göndeririz.
Bu komut dosyası başarılı olursa ekrana bir başarılı mesaj göndeririz.
Örnek konum ekleme sayfası (communitymap_addlocation.htm) için bir ekran görüntüsü ve kod gösterilmiştir:
<!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>
Haritayı Oluşturma
Konumlar çalışma sayfasını ilk adımda herkese açık hale getirdiğinizden bunların haritasını oluşturmak için sunucu tarafı programlama gerekmez. Aslında hiçbir programlama gerekmiyor. Bu E-Tablolar -> Harita sihirbazını kullanabilirsiniz. Harita için gerekli tüm kod oluşturulur. Sihirbaz, feed için JSON çıkışına işaret eden bir komut dosyası etiketi ekleyerek çalışma sayfası girişlerini sayfaya indirir ve JSON indirildikten sonra çağrılan bir geri çağırma işlevi belirtir. Daha fazla bilgiye buradan ulaşabilirsiniz.
Bu işlem için örnek HTML kodunu şuradan bulabilirsiniz: mainmap.htm. Aşağıda bir ekran görüntüsü gösterilmektedir:
Sonuç
Sunucunuzdaki kullanıcı destekli katkıda bulunduğunuz harita sisteminin kullanıma hazır olduğunu umuyoruz. Bu makalede, bu sistemin temel özellikleri için gereken en temel kod sunulmaktadır. Ancak, Zend E-Tablolar kitaplığını bildiğinize göre, sistemi özel ihtiyaçlarınızı karşılayacak şekilde genişletebilmeniz gerekir. Hatalarla karşılaşırsanız, hata ayıklama için PHP'de echo komutunu veya JavaScript'te Map API'nin GLog.write() özelliğini kullanabileceğinizi ve ek yardım için her zaman Maps API veya E-tablolar API geliştirici forumlarında yayın paylaşabileceğinizi unutmayın.