2007년 11월
목표
웹에는 지리적 위치와 관심사를 중심으로 한 커뮤니티가 가득합니다. 박물관, 유럽 대성당, 주립 공원 등을 좋아하는 사람들이 있습니다. 따라서 사용자가 지오태그된 장소를 지도에 제공할 수 있는 시스템을 만들 개발자 (예: 여러분)가 항상 필요하며, 바로 이 작업을 여기서 진행할 것입니다. 이 도움말을 마치면 사용자가 등록하고 로그인하고 위치정보 태그가 지정된 장소를 추가할 수 있는 시스템이 완성됩니다. 이 시스템은 프런트엔드에 AJAX를, 서버 측 스크립팅에 PHP를, 저장소에 Google 스프레드시트를 사용합니다. 저장소에 MySQL 데이터베이스를 사용하는 데 익숙하다면 MySQL 데이터베이스 백엔드를 사용하도록 코드를 쉽게 수정할 수 있습니다.
이 도움말은 다음 단계로 구성되어 있습니다.
스프레드시트 설정
Google 스프레드시트를 사용하여 이 시스템의 모든 데이터를 저장할 예정입니다. 저장해야 하는 데이터에는 사용자 계정 정보와 사용자가 추가한 장소의 두 가지 유형이 있으므로 각 데이터 유형에 대해 하나의 워크시트를 만듭니다. 워크시트의 목록 피드를 사용하여 워크시트와 상호작용합니다. 목록 피드는 워크시트의 첫 번째 행에 열 라벨이 포함되고 각 후속 행에 데이터가 포함된다는 점을 기반으로 합니다.
docs.google.com으로 이동하여 새 스프레드시트를 만듭니다. 기본 워크시트의 이름을 'Users'로 변경하고 'user', 'password', 'session'이라는 열을 만듭니다. 그런 다음 다른 시트를 추가하고 이름을 '위치'로 바꾼 후 '사용자', '상태', '위도', '경도', '날짜'라는 열을 만듭니다. 또는 수동으로 작업하고 싶지 않다면 이 템플릿을 다운로드하여 파일->가져오기 명령어를 통해 Google 스프레드시트로 가져오세요.
사용자 계정 정보는 비공개로 유지되어야 하며 (스프레드시트 소유자만 볼 수 있음) 사용자가 추가한 장소는 공개적으로 표시되는 지도에 표시됩니다. 다행히 Google 스프레드시트에서는 스프레드시트의 워크시트 중 공개할 워크시트와 비공개로 유지할 워크시트 (기본값)를 선택적으로 결정할 수 있습니다. '위치' 워크시트를 게시하려면 '게시' 탭을 클릭하고 '지금 게시'를 클릭한 다음 '자동으로 다시 게시' 체크박스를 선택하고 '어떤 부분?' 드롭다운에서 '시트 '위치'만'을 선택합니다. 올바른 옵션은 아래 스크린샷에 나와 있습니다.
Zend GData 프레임워크 작업
Google Sheets API는 행 가져오기, 행 삽입, 행 업데이트, 행 삭제와 같은 CRUD 작업을 위한 HTTP 인터페이스를 제공합니다. Zend Framework는 API (및 기타 GData API) 위에 PHP 래퍼를 제공하므로 원시 HTTP 작업을 구현하는 데 신경 쓰지 않아도 됩니다. Zend Framework에는 PHP 5가 필요합니다.
아직 없는 경우 Zend 프레임워크를 다운로드하여 서버에 업로드합니다. 프레임워크는 http://framework.zend.com/download/gdata에서 확인할 수 있습니다.
Zend 라이브러리를 포함하도록 PHP include_path를 수정해야 합니다. 서버의 관리 권한 수준에 따라 여러 가지 방법으로 이 작업을 수행할 수 있습니다. 한 가지 방법은 라이브러리를 사용하는 PHP 파일의 require 문 위에 다음 줄을 추가하는 것입니다.
ini_set("include_path", ".:/usr/lib/php:/usr/local/lib/php:../../../library/");
테스트하려면 demos/Zend/Gdata 폴더의 명령줄에 다음을 입력하여 스프레드시트 데모를 실행하세요.
php Spreadsheet-ClientLogin.php --user=YourGMailUsername --pass=YourPassword
작동하면 스프레드시트 목록이 표시됩니다. 오류가 발생하면 포함 경로가 올바르게 설정되어 있고 PHP 5가 설치되어 있는지 확인합니다.
전역 함수 만들기
커뮤니티 지도에 사용할 모든 PHP 스크립트는 공통 포함, 변수, 함수를 사용하며, 이는 하나의 파일에 넣을 것입니다.
파일 시작 부분에는 Spreadsheets-ClientLogin.php 예에서 가져온 Zend 라이브러리를 포함하고 로드하는 데 필요한 문이 있습니다.
그런 다음 파일 전체에서 사용할 상수(스프레드시트 키와 두 워크시트 ID)를 정의합니다. 스프레드시트의 정보를 확인하려면 스프레드시트를 열고 '게시 탭'을 클릭한 다음 '게시 옵션 더보기'를 클릭하세요. 파일 형식 드롭다운 목록에서 'ATOM'을 선택하고 'URL 생성'을 클릭합니다. 다음과 같은 내용이 표시됩니다.
http://spreadsheets.google.com/feeds/list/o16162288751915453340.4016005092390554215/od6/public/basic
스프레드시트 키는 '/list/' 뒤에 오는 긴 영숫자 문자열이고 워크시트 ID는 그 뒤에 오는 3자리 문자열입니다. 다른 워크시트 ID를 찾으려면 '어떤 시트?' 드롭다운에서 다른 시트를 선택합니다.
그런 다음 setupClient, getWkshtListFeed, printFeed의 3가지 함수를 만듭니다. setupClient에서 Gmail 사용자 이름과 비밀번호를 설정하고 ClientLogin으로 인증한 후 Zend_Gdata_Spreadsheets 객체를 반환합니다. getWkshtListFeed에서는 지정된 스프레드시트 키와 워크시트 ID에 대한 스프레드시트 목록 피드를 반환하며, 스프레드시트 쿼리 (링크)는 선택사항입니다. 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 변수에서 사용자 이름과 비밀번호 값을 가져옵니다. 그런 다음 스프레드시트 클라이언트를 설정하고, 사용자 워크시트의 목록 피드를 요청합니다. 이때 쿼리 문자열을 사용하여 사용자 이름 열이 스크립트에 전달된 사용자 이름과 동일한 행만 결과로 제한합니다. 목록 피드 결과에 행이 없으면 전달된 사용자 이름이 고유하다는 것을 알고 안전하게 진행할 수 있습니다. 목록 피드에 행을 삽입하기 전에 열 값의 연관 배열을 만듭니다. 사용자 이름, PHP의 sha1 함수를 사용한 비밀번호 암호화, 세션의 자리표시자 문자입니다. 그런 다음 스프레드시트 클라이언트에서 insertRow를 호출하여 연관 배열, 스프레드시트 키, 워크시트 ID를 전달합니다. 반환된 객체가 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!";
}
?>
등록 페이지에서 GDownloadUrl이라는 XMLHttpRequest 래퍼 함수를 사용할 수 있도록 지도 API를 포함할 수 있습니다. 사용자가 제출 버튼을 클릭하면 텍스트 필드에서 사용자 이름과 비밀번호를 가져와 해당 값에서 매개변수 문자열을 생성하고 스크립트 url 및 매개변수에 대해 GDownloadUrl을 호출합니다. 중요한 정보를 보내므로 GDownloadUrl의 HTTP POST 버전을 사용합니다. 이 버전은 매개변수를 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 페이지와 로그인 정보를 확인하고 세션 ID를 생성하여 쿠키를 설정하기 위해 로그인 페이지로 다시 전달하는 PHP 스크립트가 필요합니다. 사용자는 후속 페이지에서 세션 쿠키를 통해 로그인 상태를 유지합니다.
PHP 스크립트에서는 먼저 전역 스크립트를 포함한 다음 GET 변수에서 사용자 이름과 비밀번호 값을 가져옵니다. 그런 다음 스프레드시트 클라이언트를 설정하고, 사용자 워크시트의 목록 피드를 요청합니다. 이때 쿼리 문자열을 사용하여 사용자 이름 열이 스크립트에 전달된 사용자 이름과 동일한 행만 결과로 제한합니다.
반환된 행에서 전달된 비밀번호의 해시가 스프레드시트에 저장된 해시와 일치하는지 확인합니다. 그렇다면 md5, uniqid, rand 함수를 사용하여 세션 ID를 만듭니다. 그런 다음 세션으로 스프레드시트의 행을 업데이트하고 행 업데이트가 성공하면 화면에 출력합니다.
이를 실행하는 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"];
}
}
}
?>
로그인 페이지에서 GDownloadUrl이라는 XMLHttpRequest 래퍼 함수를 사용할 수 있도록 지도 API를 다시 포함할 수 있습니다. 사용자가 제출 버튼을 클릭하면 텍스트 필드에서 사용자 이름과 비밀번호를 가져와 쿼리 매개변수와 함께 스크립트 URL을 생성하고 스크립트 url에 대해 GDownloadUrl을 호출합니다. 콜백 함수에서 스크립트가 반환한 세션 ID가 포함된 쿠키를 설정하거나 반환된 세션 ID가 없는 경우 오류 메시지를 출력합니다. setCookie 함수는 w3c JavaScript 튜토리얼(http://www.w3schools.com/js/js_cookies.asp)을 기반으로 하는 cookies.js에서 가져옵니다.
샘플 로그인 페이지 (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 변수에서 장소, 위도, 경도 값을 가져옵니다. 이러한 모든 값을 연관 배열에 넣고 사용자가 장소를 추가한 시점을 알 수 있도록 PHP의 date() 함수를 사용하여 'date' 값도 추가합니다. 이 연관 배열, 스프레드시트 키 상수, 위치 워크시트 ID 상수를 insertRow 함수에 전달합니다. 그런 다음 새 위치의 행이 스프레드시트에 추가되면 'Success'를 출력합니다. 이 단계에서 오류가 발생하면 열 헤더 이름이 일치하지 않기 때문일 수 있습니다. 연관 배열의 키는 스프레드시트 키와 워크시트 ID로 지정된 워크시트의 열 헤더와 일치해야 합니다.
이를 실행하는 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";
}
}
?>
위치 추가 페이지에서 GDownloadUrl을 사용하고 지도를 만들 수 있도록 지도 API를 다시 포함할 수 있습니다. 페이지가 로드된 후 cookies.js의 getCookie 함수를 사용하여 세션 값을 가져옵니다. 세션 문자열이 null이거나 비어 있으면 오류 메시지가 출력됩니다. 그렇지 않으면 map.checksession.php에서 GDownloadUrl을 호출하여 세션을 전송합니다. 사용자 이름이 성공적으로 반환되면 사용자에게 환영 메시지를 표시하고, 위치 추가 양식을 표시하고, 지도를 로드합니다. 양식은 주소 텍스트 필드, 지도, 지명, 위도, 경도 텍스트 필드로 구성됩니다. 사용자가 위치의 위도/경도를 아직 모르는 경우 양식에 주소를 입력하고 '제출'을 눌러 지오코딩할 수 있습니다. 이렇게 하면 지도 API의 GClientGeocoder가 호출되어 주소를 찾으면 지도에 마커를 배치하고 위도/경도 텍스트 필드를 자동 완성합니다.
사용자가 만족하면 '위치 추가' 버튼을 누릅니다. 그런 다음 JavaScript에서 사용자, 장소, 위도, 경도의 값을 가져와 GDownloadUrl를 사용하여 communitymap_addlocation.php 스크립트로 전송합니다.
스크립트가 성공을 반환하면 화면에 성공 메시지가 출력됩니다.
다음은 샘플 위치 추가 페이지 (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 Spreadsheets 라이브러리에 익숙해졌으므로 특정 요구사항을 충족하도록 시스템을 확장할 수 있습니다. 진행 중에 오류가 발생한 경우 PHP의 echo 명령어 또는 JavaScript의 Maps API GLog.write()를 사용하여 디버깅할 수 있으며, 언제든지 Maps API 또는 Spreadsheets API 개발자 포럼에 게시하여 추가 도움을 받을 수 있습니다.