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