Design and Implementation of Tourism Information

System Based on Google Maps API

Yimeng Wu Zhixue Liang*, Liming Liu
Dept. of Automation Software School
Naval Academy of Armament Nanyang Institute of Technology
Beijing, China Nanyang, China
e-mail :wuym613@gmail.com *Corresponding author, e-mail:zhixueliang@sina.com

Abstract—Obtaining more accurate information of tourism In order to adapt to self-navigation tourism, this paper
destinations is the most concerning thing for tourists, especially proposed an idea which construct an open tourism information
for self-navigation tourists. This paper proposed a resolution system using technologies of Google Maps API and Web GIS.
which constructs tourism information system using Google Maps
with Web GIS. Based on J2EE platform, adopting technologies of II. ANALYSIS OF SYSTEM FUNCTION
struts2 framework, Google Maps API, Ajax, JSON and so on, an
Based on technology of Google Map and system marked,
open travel information platform was implemented. Using the
with the user help, classified tourism information in the
platform, tourists can conveniently obtain more references for
their travel. platform is gradually filled. Travelers can freely mark and
discuss the place where he traveled using the system to provide
Keywords- Tourism Information System; Google Maps; Web reference for self-navigation. Finally, through the marked
GIS information, comments, feedback of all users, a tourism
information database including food, shelter, traveling,
shopping, entertainment is constructed.
I. INTRODUCTION The main users are guests, members, administrators. Its use
Tourism has been becoming more and more popular with case model is shown in Fig. 1.
the improvement of people’s living standard. Unfortunately, it
has also accompanied increasing inconveniences and register
deficiencies of traditional tourism which is concentrated on
travel agencies or tourism agents, so more tourists are apt to
view marked point
travel by self-driving and self-navigation and so on. So self- guest
navigation is becoming tendency to future traveling.
view comments
For some tourists, making a reasonable travel plan is one of delete personal marked point

their primary concerns; it has become essential to obtain more <<include>>

accurate information of tourism destinations, including some personal information management

aspects of food, shelter, traveling, shopping, entertainment, and <<include>>

so on. More tourists tend to collect traveling information with member personal marked point management
<<include>> add marked point
the help of some search websites. But some deficiencies using
search websites are as follows: delete personal comment
modify marked point

A. Tourism information is scattered.

publish comment
It is difficult to classify the tourism information from
search website by different traveling aspect. So the users need
to rearrange the information and pay additional work. member management
<<include>> delete marked point

B. Tourism information is unconfirmed. <<include>>

marked point management
It is also difficult to obtain real and valid information from
the huge tourism information from search website because of administrator comment management
verify marked point

some rubbish and mendacious information. Some description

of traveling destination is second-hand or subjective.
Figure 1. Use case diagram
C. Tourism information is flat.
Because the information from search website is simple text- Guests can view all marked-points, detailed information
description, it is difficult to obtain three-dimensional tourism and comments, not mark new point and comment any marked-
information of destination. point. Members can make new point and comment all marked-
points. Administrators have management functions of members, IV. KEY TECHNOLOGIES OF SYSTEM
marked-points, comments and etc.
A. Map Service based on Google Map API
III. DESIGN OF SYSTEM Google Maps API is programming interface which is
A. Architecture Design of System developed and provided by Google Company. Using it,
developers can conveniently realize extensible programming.
The tourism information system is adopted B/S pattern and The API is provided by JavaScript language, so, using
three-layer architecture which includes view layer, business JavaScript programming, developers may easily integrate
logic layer and data layer. One of obvious advantages from Google Map service with their own projects. Using API library,
three-level architecture is divided into the user interface, users can freely make marked point and various information
application logic layer and data management layer, so that the windows.
system can easily deal with various needs. Its architecture is
shown in fig. 2. Base on Google Maps API, the process of developing
tourism information system is as follows.
Browser GET Google server 1) Embedding Google Map into web page.
In this platform, tourism information system provides these
classifications, such as food, shelter, traveling, shopping and
HTTP entertainment to make user search conveniently, meanwhile,
the system also provides three-layer navigation menu of county,
Web Server city, and province. Combined with above two functions, So
Tomcat users can freely locate, view and mark the tourism information
according to their own needs. In addition, users can carry out
location by search function of Google Map. Relative Javascript
codes are seen as follows:
Database Server var map = new
Mysql GMap2(document.getElementById("map_canvas"),{draggable
Cursor:'auto',draggingCursor:'move'});
Figure 2. Architecture diagram
map.setCenter(new GLatLng(cy,cx), 14);// cx,cy are
Using Google Maps API, web browser can realize some //parameters from navation, cx is longitude,cy is latitude.
map functions like loading, scaling, mobile and distance
calculating. The main tasks of web server are to receive the 2) Initializing Google Map
users’ requests, analyze and respond to them, for instance, The main task of initializing map is to add various monitor
adding new marked-point or showing marked-point events such as click, drag and so on. Some codes are shown as
information and so on. Database server is served as information follows.
storage like user, marked-point, comments, etc. var customUI = map.getDefaultUI();
In architecture design, we adopted popular structure customUI.maptypes.hybrid = false;
technology of Struts2 so that it has employed advantages of
flexibility and extensibility. map.setUI(customUI);
B. Database Design of System geocoder = new GClientGeocoder();
Some tables are constructed in database design like user GEvent.addListener(map, "click", function(overlay,latlng)
information table, marked-point table, comments table and so {
on. In the design, we saved data information of cities and
if((parent)&&(!parent.chosenotetool)){
provinces by JS data format. The main logic relationship of
database is shown in Fig. 3. return ;

id
note

int <pk>
}
username varchar <fk>
name
notedesc
varchar
text
if ((parent)&&(parent.chosenotetool)&&(latlng)) {
shflag int
class
cx
int
float
FK_NOTESHOP_REFERENCE_NOTE
map.addOverlay(createMarker2(latlng, 3));
cy float

cy= latlng.lat();
sdate date
FK_NOTE_REFERENCE_ACCOUNT
regioncode int
website varchar
sign int
backup varchar
id
noteshop
int <fk1>
cx= latlng.lng();
account noteid int

id int FK_NOTESHOP_REFERENCE_ACCOUNT
notetite
username
varchar
varchar <fk2>
}
username varchar <pk> notecontent text
password
email
varchar
varchar
notetype
createday
varchar
date });
sex char remark varchar
address varchar editday date
jibie int backup varchar ………//add various monitor events

Figure 3. Logic relationship of database 3) Marking in Google Map

 When users login the system successly,they can freely mark
in Google Map. The mark tourism information including name,
picture, address, website, and detailed description is saved in
database. The codes are seen as follows:
function createMarker1(
point,noteid,notename,notedesc,noteuser,
notesh,website) {
…………
Figure 5. Screenshot of detailed mark information
var marker = new SuperMarker(point, markerOpts);
GEvent.addListener(marker,"mouseover", function() B. Techonolgy of JQuery
{ JQuery is an excellent cross-browser JavaScript framework.
marker.setImage(imgHover); It provides some page components and light JavaScript library,
so users can freely deal with html documents, events for
}); animation effects. In addition, it provides function of AJAX
interaction for straightforward page operation.
gmarkers.push(marker);
Using technology of JQuery framework, page logic is
noteids.push(noteid);
separated from page contents so as to simplify the work of html
notenames.push(notename); code because we need define component id instead of calling
some JS codes in html page.
notedescs.push(notedesc);
Technology of JQuery is often used in tourism information
noteusers.push(noteuser); system. For example, when users upload their head photo in
noteshs.push(notesh); register, the system needs to hide different div elements in
different phase and adjust the size according to the image
GEvent.addListener(marker,"click", function() { scaling.
getmarkinfo(marker); Some image scaling codes are as follows:
window.open("/boda/noteshop/shopdetail.jsp?id="+cu ………
rnoteid+"&lat="+lat+"&lng="+lng);
$iconElement.css({ width: currentWidth + "px", height:
}); currentHeight + "px", left: originLeft + "px", top: originTop +
return marker; "px" });
} $imagedrag.css({ width: currentWidth + "px", height:
currentHeight + "px", left: dragleft + "px", top: dragtop +
Function of map mark is shown in Fig. 4. "px" });
$("#txt_width").val(currentWidth);
$("#txt_height").val(currentHeight);
$("#txt_top").val(0-dragtop);
$("#txt_left").val(0-dragleft);
$("#txt_Zoom").val(scaleFactor);
………
C. Technology of JSON
Figure 4. Screenshot of map mark JSON (JavaScript Object Notation) is a lightweight data-
interchange format. It is easy for humans to read and write. It is
Detailed mark information is shown in Fig. 5. easy for machines to parse and generate. It is based on a subset
of the JavaScript Programming Language, Standard ECMA-
262 3rd Edition - December 1999. JSON is a text format that is
completely language independent but uses conventions that are
familiar to programmers of the C-family of languages,
including C, C++, C#, Java, JavaScript, Perl, Python, and many
others. These properties make JSON an ideal data-interchange
language.
 Combining AJAX technology with JSON, the system ACKNOWLEDGMENT
realized the perfect effect of page display in system The authors would like to express appreciations to
development. For example, when mouse hovers over the colleagues in our development team for their valuable
information markers, the mark information should be shown comments and other helps.
automaticly.
Some codes of construction JSON data format in server are REFERENCES
as follows: [1] ZHANG Xiaoyu,LI Xiang. “Information System of Land Utilization
Based on Google Maps”.Computer and Digital Engineering. vol. 40(10),
JsonArray jsonArray = new JsonArray(); pp. 146 - 149. 2012.
[2] Jing Xidi. “Design and Implementation of Dalian Tourism Information
if(rs.next()) System Based on Google Maps”. Liaoning Normal University. 2011.
{ [3] Yang Haidong. “Design and Implementation of a Travel e-commerce
System of Innovative Mode”. Internet fortune pp. 174 - 175. 2010.
JsonObject obj = new JsonObject(); [4] Wan Tingting,Wang Fangxiong “Design and Development of Dalian
Tourism Information System”.Geospatial Imformation, vol. 9(6), pp. 77
obj.add("id",rs.getInt("id")); - 79. 2011.
obj.add("note",rs.getString("note")); [5] Sun Zhongyi,Huan Zhuowei,Tong Zhijun . “Design and Implementation
of Tourism Information System Based on Google Maps API”.Science
obj.add("image",rs.getString("image")); and Technology Innovation Herald. pp. 14:19 - 20. 2012.
[6] Wang Zhenhua,Wu HaiTao. “Design and Implementation of Tourism
obj.add("description",rs.getString("description")); Information Database Based on Google Maps API”.Computer and
Digital Engineering. vol. 39(6). pp. 186 - 189. 2011.
………
[7] Fu Weiping, Guo Jianwen, Liu Peng. “A Vectorization Web Platform
jsonArray.append(obj); based on Google Maps API”. Remote Sensing Technology and
Application. vol. 26(6). pp. 863 - 867. 2011.
} [8] Wang Zhihong,Hu chuan. “Research and Application of Web Map
Service System Based on Google Maps API”. Standardization of
result = jsonArray.generateJsonText(); Surveying and Mapping. vol. 26(2). pp. 46 - 48. 2010.
……… [9] Fu Kai, Xu Weisheng. “Research on Vehicle Monitoring System for
Emergency Logistics Based on the Google Maps API”.Computer
The data returned from server can be conveniently dealed Knowledge and Technology. vol. 7(31). pp. 7715 - 7717. 2011.
in client as follows: [10] WANG Hongyun, ZHANG Jiuquan, YANG Dehai,et al. “Design and
Implementation of Tobacco Leaf Production Management System in
……… Dali Using Google Maps”.Chinese Tobacco Science. vol. 33(1). pp. 85 -
90. 2012.
var obj = eval('(' + resutl + ')'); [11] Huang Meizhen, Xu Fang, Xu Shuhua. “Design and realization of a
commercial project of red tour based on Google Maps”.Computer Era.
obj.id;//obtain object’s id pp.3 :62 - 64. 2012.
obj.note;//obtain’s object’s note [12] YUE Ying, GUO Yifei. “Designing and Realizing of the Agricultural
Meteorological Service Platform Based on the Google Map”.
……… Agriculture Network Information. pp. 10: 42 - 46. 2012.
[13] Zhang Yang,Zheng Jianghua. “Classic Tourism Routes Query
V. CONCLUSIONS Information System of Xinjiang Based on WebGIS”. Journal of Geo-
Information Science. vol. 13(4). pp. 500 - 505. 2011.
Combined the technologies of Web GIS with Google Maps,
[14] Ling Lin. “Applications of Geographic Information System (GIS) in the
the tourism information system has implemented so that it can Tourism Industry”. Fudan University.2009.
effectively resolve the defects of information search in
[15] Sheng Yadong. “Address Parsing System Based on Google Map”.
traditional website. It has characterized with specific Beijing University of Posts and Communications.2012.
classification, real and three-dimensional tourism information [16] Yang Xushi. “Design and Implementation of Web Query Based on
as well as extensible factors. Based on this, it can also provide JQuery Framework”. Computer and Modernization. pp. 8:18-129. 2010.
accurate and concrete travel information for more tourists.