A WEB-BASED CAMPUS DATA MANAGEMENT USING

GOOGLE MAPS API

Nguyen Duy Binh,
Lecturer, Faculty of Land Management,
Vietnam University of Agriculture, Gia Lam, Hanoi, Vietnam
Abstract
Nowadays, Web-based tools and GIS have been used by many universities all over the
world for different aims. These tools are often used to manage data in university campus which
can be developed into a wholeness and integrity that is formed by hardware, software, data and
users in order to collect spatial and non-spatial data about the university and its sub-units (both
academic and administrative), transfer them to computer, store, query, analyze and present the
result reports as graphics or non-graphics (Kumar, 2011; Geymen, 2012). We developed a
Google Maps-based GIS information system for Vietnam University of Agriculture which
provides access to information of important buildings and university units, and intend to expand
the system to include other campus data such as electrical, road, seawage networks, etc. The
system is based on the three-tier web application architecture, which is divided into the client
tier (web browser), the server tier (web server with GIS server), and the database tier. The
database tier currently stores information about the university units which have offices in the
respective building. It is open to constant updates, user-friendly for both trained and untrained
users, and capable of responding to all needs of users and carrying out analyses. Based on the
recent reactions from the university leadership and students, it proves that the system is user
friendly, deliver useful information to users, and contains the important features that the user
expects. To our best knowledge no other university in Vietnam has a similar advanced system to
display their campus. The technologies used to develop this web-based GIS application can be
used to create other similar applications not only for other university/school campuses but also
for land and natural resources management, for tourism and real estate management, etc.
Keywords: Web-based interactive map, university campus map, Google Maps API, web technology.

1 Introduction
The World Wide Web (WWW) is the most recent innovative medium to present and
distribute spatial data. Here, the map plays a key role, and has multiple functions. Maps can play
the traditional role of providing insight into geospatial patterns and relations, but can be linked
to a considerable big database (Bildirici and Ulugtekin, 2010). And due to such technological
advancement, information today has become rapidly accessible. It is inevitable for the educatory
institutions, where the basis of information is formed, to pioneer at the point of presenting
information (Özyavuz et al., 2009). In this context, presenting to the user information on
institutions which are able to access information constitutes one of the most primary steps.
Computers and electronic communication stand out as important components in terms of
making information available and faster flow of information. Geographical information systems
are a part of this trend. If we take universities as the most important institutions to inform
societies, it becomes clear that universities should also be the platform where information
should be utilized most efficiently today. This is why evaluating, updating and drawing new
information out of the current information at hand forms the conditional basis in order for
universities to conduct planning, develop and perform education activities in the best manner
possible (Geymen, 2012).
In addition to containing information such as university topographies, land use and natural
characteristics, as well as health services and landscaping the campus information system is an
information system that is capable of accessing statistical information regarding education or
distribution of students over departments and faculties, and aims to ensure that administrations
make rapid and sound decisions on all types of planning services about education, personnel
management, facility management and the university's future (Kumar, 2011). Such a system

1
offer online accessibility in mapping form is often referred to as web-based mapping (WebGIS)
and applications in GIS (ESRI, 2010).
WebGIS has many technical advantages. Data can be maintained and be updated in a
centralized location or be integrated with many sources on broad spectrum platforms. A web-
based map can be used both privately and publicly The end-user software is an easy and cheap
web browser, not an expensive and complex GIS program. The web browser provides a much
more dynamic map tool than a static map display (Aydinoglu and Yomralioglu, 2003). In this
context, presenting in WebGIS to the user information on university campus constitutes one of
the most primary steps for creation of a GIS-based campus information system.
The Google Maps launched in 2005 has revolutionized online mapping service applications
on the World Wide Web. Many leading universities in the world have been logically adopted
Google Maps as their background to develop their online maps applications. There is even
concept of Digital Campus which would capture every bit of campus information and activities
including online e-learning (Porter and Sherwin, 2013).
Recently there has seen increasing interest in utilizing Google Maps API to implement
web-based mapping services, ranging from simple applications to display just a few points of
interest with information window to sophisticated map mashups (Johnston and Jensen, 2009;
Roth and Ross, 2009; Chow, 2008; Pan et al, 2010). Scholefield (2010) developed a web-
based map service for tourism of eighteenth and nineteenth century Edinburgh using Google
Map API, Oracle RDMS (Relational Database Management System), Microsoft SQL
(Structured Query Language), Perl, eXtensible Markup Language (XML), JavaScript, Hypertext
Markup Language (HTML), eXtensible HTML (XHML), and Cascade Style Sheet (CSS).
Similarly, Pejic et al. (2010) developed an eTourism application using Google Map API to
present prominent points of tourist destinations. Bildirici and Ulugtekin (2010) demonstrates a
web mapping service with Google Maps (API V2) mashups in which points, polylines and
polygons from the data stored in Keyhole Markup Language (KML), XML and Geodatabase
format are overlaid with Google Maps through JavaScript code. Liu and Palen (2010) examine
the use of Google Maps mashups in the crisis management for nine natural disasters such as
earthquakes, fires, sea level rise, and so on using near real-time and publicly available data
feeds. Hu (2012) discusses a new approach of mashups in multimedia mapping that utilizes
Google Maps API, Yahoo! Flickr API, and YouTube API to combine spatial data, multimedia
information and functionality from multiple sources to create the online visitor guide for the
Southern Illinois University Edwardsville campus. Hu and Dai (2013) reported a case study of
an online map service to display tens of thousands gardens on the Internet for the United States
Department of Agriculture (USDA) People's Garden Initiative. Eder et al (2015) used Google
Maps API to developed an interactive campus map for Mindanao University of Science and
Technology.
However, despite there were some early investigation of Maps API (Lê and Nguyễn, 2012;
Nguyễn Đăng Vỹ, 2010, Trần Nam Phong, 2014), to our best knowledge, the number of Web-
based Google Maps API applications in Vietnam, not alone Vietnam universities is still very
small and most of these applications are still in a very primitive stage.
The campus map that is resided now on the VNUA website is a static visual representation
of the campus in a very primitive cartographic view. It uses legends, building name and its
corresponding building number which is often not clear, in providing information. It became an
obvious necesity to create an interactive campus map for VNUA. Interactive campus map would
provide new navigational experience to students. As cited in the vision of Vietnam University of
Agriculture (VNUA), VNUA is one of the country’s leading providers of agricultural science
and technological skills, has been progressing dramatically. New buildings, rooms and offices
are constructed for different academic units to provide a good learning environment for
students, thus making it a perfect candidate to adapt the interactive campus map. Availability of
the campus map adds benefits to students especially on the university’s continuous growth. This
study aims to provide features in a visual interactive GIS map like locating points of interest,

2
and provide necessary information of university units, lecture room location and schedules,
campus facilities and events, etc.
The present paper will present (a) a summary of current technology, methods and tools
necessary to develop a Google Maps based interactive campus map; and (b) a description of the
interactive map of VNUA that was designed and implemented which can be further developed
to become a campus visual information system for VNUA.

2 Methodology
As stated in the previous section, it is absolutely necessary for Vietnam University of
Agriculture (VNUA) to provide an interactive web-based map which will replaced the present
outdated map on VNUA website. The new interactive map called VNUA_Maps, would provide
in an online GIS environment essential information of all buildings, units and facilities in the
campus while there is at least a tool to help user in searching and locate quickly enough any
desired building/ office/facility in campus. The system should be developed using the most
updated IT technologies and tools and can be opened to be developed further into a web-based
GIS campus information system.

Designing the information system

According to Adnan et al. (2010) there are different mapping technologies, database
standards, and web application development standards that are relevant to the development of
web-based GIS applications such as the VNUA Maps. The application comprises of three
essential parts, namely (a) web-based GIS mapping which can be static map renders, slippy
(tile-based) maps or flash mapping; (a) database being the part that stores and manages all data
including geographically referenced ones; and (c) web application development provides the
standards concerned with the actual development of the web application and entails different
techniques and technologies that, once used efficiently, can enhance the performance of a web
application.

Web-based GIS mapping

The development of web applications that manipulate geo-referenced information is often
supported by Application Programming Interfaces (APIs) that leverage specialized component
frameworks for this domain. This form of reuse enables a rapid development cycle of high
quality applications. An API is typically used by programmers, but it can also be used by
domain experts who occasionally may play the role of programmers in the development process.
There are a number of APIs that can be used to develop interactive maps, such as the Google
Maps JavaScript API, Microsoft Bing Maps API, Nokia Ovi Maps API, and ESRI ArcGIS API,
Yahoo! Maps API, and the OpenLayers JavaScript Mapping Library. A more reduced API, like
the Google API, the provided objects may allow a higher level of abstraction, which facilitates
the learning and usage of an API (Fernandes et al, 2013).
Based on Asynchronous JavaScript and XML (AJAX), Google Maps introduced a new
type of client/server interaction to maintain a continuous connection between the client and the
server for immediate downloading of additional map information (Hu and Dai, 2013). In
addition, With the current version 3, it is not required to register the API key to use the Google
Maps. The new version supports both traditional web browsers such as Internet Explorer 7.0+,
Firefox 3.0+, Safari 4+, Chrome, Android, BlackBerry, and Dolfin as well as web browsers
such as the Apple iPad and iPhone on mobile devices, all of which having a full JavaScript
implementation. These features make Google Maps JavaScript API the most commonly used
Maps API for online mapping (Peterson, 2012).
It was decided to employ Google Maps API to develop the present online map application.
Since Google Maps does not provide map detailed enough for the study area, the authour
planned to overlay the additional features to provide better interactivity to the campus map.
These features are the university buildings, administration management units, academic units,

3
research institutes, services, classrooms, parking places, restaurants and other campus facilities.
The author made use of custom overlay functions to achieve the possibility in adding additional
functionalities of the campus map. The overlays used were the Markers and Polygons. Markers
were used to display locations, source and destination. Polygons were utilized to represent
buildings inside the campus, that forms a closed loop and define a filled region. Polygons and
Markers made use of events that when clicked it will trigger and show the information window
of the building. These information windows in the current version contain description of the
building/unit, its postal, phone and web addresses as well as links to pages with floor layouts of
the building where available. The system also provides floor layouts of the main buildings,
which would help strangers to easily locate his/her destination. The future version of the system
would include information about the electric, sewage network, university activities, campus
guides, and classroom schedules.

Design of the Database

There are many choices for setting up database management system to store and manage
data. Online map application can be developed using one of many DBMS (Database
Management System) such as Oracle RDMS (Relational DBMS), Microsoft SQL (Structured
Query Language) server. The other open source methods such as eXtensible Markup Language
(XML), JavaScript Object Notation (JSON), JavaScript, Hypertext Markup Language (HTML),
eXtensible HTML (XHML), and Cascade Style Sheet (CSS), Fusion Tables, or KML can also
be used for the preparation of spatial data, which are suitable for data exchange and
transmission
over the
internet. The
later when used
on an API
platform is
considered
providing fast
delivery of the
customized
services or data,
although they
usually lack of
sophisticated
functionalities
and intuitive
user interfaces
that can offer
the user the Figure 2.1 Data conversion and processing.
capability to
manipulate the data.
The present study selected XML and JSON to construct the application database and
JavaScript as a language of choice to manipulate the database. The data was organized in layers
and stored in json files, i.e. bldgs.jsn for building data, roads.jsn for transportation network data,
water.jsn for hydrological network data. The structure and format of the database were
developed following standards described in Aziz and Mitchell (2007). Figure 2.1 presents data
source, data conversion and manipulation used in the study.

Development of Web-based GIS application

Context diagram (Figure 2.2) was used to illustrate its logical design and the scope of the
system. The system consists of five (5) entities namely, user, admin, Google Map, Superuser
and the database. The system has three (3) types of users, namely, user, admin and superuser.

4
When the user views the campus information and directions, the system will filter and retrieve
its information from the database and provide routing service with the aid of the Google Map
API. The Admin and Superuser on the other hand have similar rights except they additionally
can edit the database. The Google Map is used to provide visual representation of the campus
map and routing capabilities.

Figure 2.2 A conceptual framework of developing VNUA online map application.

Selected Tools
The software used that aid the researchers on the development of the information system
are XAMPP, Bootstrap and Notepad++. XAMPP (Xampp, 2015) is a Windows web
development environment and allows to create web application with Apache2, PHP and
MySQL database. Bootstrap (Bootstrap, 2015) is an open source front-end framework for
developing responsive, mobile first projects on the web. It aids the researchers to provide an
ease on the design. Notepad++ (notepad++, 2013) is a free source code editor and Notepad
replacement that support several languages. This tool was used to create and view the source
code with ease. Among the important features such as, syntax highlighting, syntax folding,
indent guide, color and two edits made it easy for the researchers to create the system. HTML5,
CSS3, PHP, and jQuery, played an important role to provide a rich representation and
functionality of the map and the additional custom made interfaces.

Mobile and Web Browsers Compatibility

It is anticipated that the VNUA online map service needs to be used in most of the web
browsers such as Microsoft Internet Explorer (IE) 7.0+, Google Chrome, Mozilla Firefox, and
Apple Safari. The initial testing of the online map application indicated that there were
compatibility issues. For instance, Microsoft IE (7, 8 and 9) and Mozilla Firefox did not support
rounded corners for infowindow panels. Apple Safari for iPad and iPhone did not support flash
movies. Only Google Chrome did not have any problem. Those issues were resolved by offering
a separate main page vnua_maps.htm to detect whether the browser is IE or Google Chrome,
Mozilla Firefox, and Apple Safari. If it is IE, the web page is automatically redirected to
index.htm; otherwise, it is redirected to vnua_maps.html.

5
3. RESULTS AND DISCUSSION

The database for VNUA Maps

For VNUA Maps we use Google Maps (GM) as background layer and through GM API we
clear all GM layers except administrative, landscape, roads and school layers. That layer
manipulation was implemented by using the following mashups.
map.set('styles', [
{
featureType: 'all',
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}, {
….
]);
As mentioned above, the present study utilizes open source methods such as XML and
JSON for the preparation of spatial and non-spatial data which are suitable for online map
application. Database part of the application was developed with JSON data standards which is
an open standard format that uses human-readable text to transmit data objects consisting of
attribute–value pairs. It is the primary data format used for asynchronous browser/server
communication (AJAJ), largely replacing XML according to Aziz and Mitchell (2007).
Geographical features were first created/edited in ArcGIS and were converted to JSON to be
used with Google Maps API. Attribute data was incorporated into JSON database with
Notepad++. The following is a sample of JSON data for a building (in this case is the dormitory
C1).
{"type":"Feature",
"properties":{"Id":7,"BldUse2":"Residence","images":"ktx_c1.png","addressStr":"VNUA,
Ngo Xuan Quang str, Trau Quy, Gia Lam,
Hanoi","phone":"04.36762116","GoogInfoWi":"Dormitory C1","website":null,"Details":"Not
available yet. We will try our best to update the information as soon as
possible","email":"Consultant@vnua.edu.vn","bldAbbrev":"tn5"},
"geometry":{"type":"Polygon","coordinates":[[[105.93702658815783,21.00141451010367
5],[105.93702198023055,21.001399822335607],[105.93698083682986,21.001268677746463],
[105.9366455616569,21.001373862114523],[105.93661563433903,21.00138325107702],[105.
93666138566674,21.00152908343423],[105.93702658815783,21.001414510103675]]]}
},
The feature contains attribute part (properties) and spatial part (geometry). It can be seen
clearly a data field comprising of a name and a data portion separated by a “:” sign.
As mentioned above, buildings and facilities of VNUA were created in ArcGIS for their
geometry first, then their attribute data such as ID, name, addresses, description, etc. was
assigned also in ArcGIS. That attribute input data can be prepared separately in MS Excel/Word
and can be joint with spatial data in ArcGIS. Figure 3.4 presents a portion of the final JSON file.

6
 Figure 3.4 A portion of JSON formatted database for VNUA Maps.

Use of JavaScript and CSS

In the design of the online map application using “mobile first” concept (UXPin Inc.,
2015), a HTML pannel with two-rows layout design was adopted, including first row for a
hamburger menu item and a title, second row for the map container, and building list interface.
In the building list interface, two columns are provided, including one for legends, and the other
for list of buildings/units grouped by types (Figure 3.1).

Figure 3.1 VNUA Web Interactive Campus Map Home Page.

7
 The current version of VNUA Maps contains data of 58 buildings/units including all
administration units, academic units (faculties) research institutes, lecture rooms and services.
The symbol of academic units and research institutes allow activation of interface in the form of
infowindow which displays essential information of the corresponding unit. The interface in
Google Maps API was developed using jQuery, a cross-platform JavaScript library designed to
simplify the client-side scripting of HTML. To do so, the programmer has to download jquery.js
(all open sources) from the jquery site (https://jquery.com/).

Google Maps API scripts

Google Map API supports web, iOS and android. Google Map API for web has big
contributions in making this study possible because of its capability to let developers customize
and design the map according to its purpose. Figure 3.2 shows the script used to access the API.
With this script, the researchers were able to create building polygons, legend markers and
campus guide waypoints.

Figure 3.2 Script of the Google Map API key

The script on Figure 3.3 is used to embed the Google Map to the website with the desired
map type options and locations needed on the study. Among the important options were the
Longitude and Latitude points of the center, the default zoom level, and the map style. The
figure describes also the key scripts that control displaying of features on a Google Maps
background. That were performed by loadGeoJson method and subsequent stylePolygons
function, by addMarkers function and by addLisstener method.

Figure 3.3 Source code for embedding Google Map to the website
Figure 3.4 is a sample for styling the building polygons which are coloured according to
their type property, i.e. general education, administration, support or sports.
8
 Figure 3.4 Source code of the styling of the building polygons
Figure 3.5 illustrates the script that controls contents of the infowindow of the building
polygons. The javascript uses getproperty event to select the desired information from the
database (JSON file in this case). One needs to know css to fully understand the script.

Figure 3.5 Script that control contents of the infowindow

9
 More details about the Google Maps API are provided in the Google Maps JavaScript API
V3 Reference (Google, 2015).
Creating a web application involves a lot of tools to come up with the preferred design and
functionality. Among the tools that were used are MYSQL, PHP 5.3, JQuery, HTML 5, CSS 3,
Bootstrap and Google Map API Version 3 which constitutes newest feature. The present study
used XAMP, a web developer platform, to simulate and create the web application using
APACHE 2, PHP and MYSQL database. Scalable Vector Graphics (SVG) was also utilized to
create the floor layout so that the image will not be pixilated when zoomed.

Online Map Interfaces

This study was conducted at Vietnam University of Agriculture (VNUA) situated at Trau
Quy, Gia Lam district, Hanoi City. It was linked at the VNUA Website
(http://vnua.edu.vn/khoa/fita/vnua_maps) which can be accessed and viewed by anyone who
visits the university website.
Screenshots were taken from the web interactive campus map application of Vietnam
University of Agriculture to provide an illustration on how the system was designed. On figure
3.1, it shows the home page for all users. The menu on the left side of the page can be opened
by ticking/touching the hamburger icon. The menu pane contains links to detailed layout plans
of different buildings, to Hanoi public transportation interactive map as well as to the university
homepage. In the lower right corner of the screen one can access a guide window which
contains map legends and a linked list of a majority of university buildings and facilities. These
items are grouped according to the common types of structures in VNUA, namely management,
academic & research, classroom, sport, entertainment and services.
Figure 3.6a is the map when an item, stadium, in the linked list is selected. It can be seen
football icon is assigned to the stadium polygon. If a certain polygon (i.e. a building) is clicked,
an infowindow (figure 3.6b) would apears. Information in the infowindow includes a short
description of the building, photos, contact addresses and links to its website as well as to its
layout plans (such as in figure 3.6c). Figure 3.6d is just to show the map in zoom out mode
which indicates the map is an integrated part of Google Maps inheriting all features and
functionalities of Google Maps.

4. Conclusions
This paper has demonstrated an online mapping application that was successfully
developed using Google Maps API v3, Google Geocoding, XML/JSON database, and Web
mobile. The case study presented in this article provides the advanced functionality to display
the locations and summary counts of VNUA’s buildings, units and facilities on the Internet with
customized icons and map legend. It also provides interfaces for easily location of offices and
facilities in a GIS environment. The future version of the web-based GIS application would
provide sophisticated functionalities such as searching, filtering, and tabbed interface that offer
the administrator and/or user the capability to manipulate the data.
The system has undergone consultations with VNUA leadership and concerned students
and staff to know whether the problems of the existing campus map has drawn into a conclusion
and objectives of the study has been met and also, gather information on the outlook of the user
about the design and functionality of the proposed system. The authour was able to know their
concerns and suggestions and made suitable adjustments based on the results. This study
focused on providing a new way of spreading information which has been achieved due to the
new features that the proposed system offers. Because of this, the system has gained positive
feedbacks from the respondents. The existing campus map has its own benefit but lacks
interactive functionalities. The system was made to better provide a friendly user interface
making it more beneficial to students, employees and visitors of the institution. The system also
provides additional queries like amenities, staff, room and buildings which the respondents

10
found it useful and easy to access, thus, making it a valuable online resource in providing
campus information.

Figure 3.6 Screenshots of the VNUA Maps.

Publishing and sharing geo-spatial data are becoming important and popular tasks in
various applications. One particular sector for application might be land management. Data of
land parcels such as land right, land prices, etc. for a whole region can be published online
which certainly will improve dramatically transparency in land management. And there are
numerous other sectors such as tourism, real state management, environmental monitoring,
water resources management in a region or a country can use concept of the current Google
Maps API application to deliver information to an online map immediately so the officials and
the general public can be aware of the data and possibly can detect any issue in the respective
domain. The project described in this paper can be easily modified to meet the requirements of
such important tasks.

Acknowledgements
The concept used in this paper was first introduced by the author in 2008 when starting re-
design website of the university. And as a results many students have been working on the
project using different methods and tools. The authors are especially thankful to all of them.
Thanks also to Prof. Dr. T.D. Vien and other VNUA leaders who has been continuously
encouraged IT application work in VNUA as well as numerous other people who provided
advice and needed data throughout the effort. The author would single out Mr. Vu Ngoc Huyen
for all the photos used in the application.

References
Adnan, M., A.D. Singleton and P.A.Longley, 2010. Developing Efficient Web-based GIS
Applications. Centre for Advanced Spatial Analysis University College London.

11
Aydınoğlu, A.C. and T. Yomralıoğlu, 2002. Web Based Campus Information, System.
International Symposium on GIS, Istanbul, Turkey.
Aziz, A., and S. Mitchell, 2007. An Introduction to JavaScript Object Notation (JSON) in
JavaScript and .NET. Available online at https://msdn.microsoft.com/en-
us/library/bb299886.aspx.
Bildirici, I. O. and N. N. Ulugtekin, 2010. Web Mapping with Google Maps Mashups:
Overlaying Geodata. A Special Joint Symposium of ISPRS Technical Commission IV &
AutoCarto in Conjunction With ASPRS/CaGIS 2010 Fall Specialty Conference,
November 15-19, Orlando, Florida.
Bootstrap, 2015. "Bootstrap 3.3.5 Released". Available online at
http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/.
Chow, T. E., 2008. The potential of Maps APIs for Internet GIS Applications, Transactions in
GIS, 12(2), pp. 179-191.
ESRI, 2010. GIS in the Web era. Environmental System Research Institute. Available online at
http://downloads2.esri.com/ESRIpress/images/188/115391_WebGIS_Chapter01.pdf
Eder, M.S., C.J.L. Nocete, G.L. Rances, E.M. Tarrosa, J.N. Yanson, 2015. Web Interactive
Campus Map. Int'l J. of Scie. & Tech. Reseach, Vol.4(03): 62-67.
Fernandes, A.I., M. Goulão and A. Rodrigues, 2013. A Comparison of Maps Application
Programming Interfaces. In Proceedings of the 16th AGILE Conference on Geographic
Information Science, 2013
Geymen, Abdurrahman, 2012. Interactive web-based campus information system. Scientific
Research and Essays Vol. 7(47), pp. 4100 -4108, 3 December, 2012. Available online at
http://www.academicjournals.org/SRE.
Google, 2015. Google Maps JavaScript API V3 Reference. Available online at
https://developers.google.com/maps/documentation/javascript/reference?hl=en
Hu, S. and T. Dai, 2013. Online Map Application Development Using Google Maps API, SQL
Database, and ASP.NET. International Journal of Information and Communication
Technology Research, Volume 3 No. 3, March 2013.
Johnston, L. R. and K. L. Jensen, 2009. MapHappy: A user-centered interface to library map
collections via a Google maps "Mashup". Journal of Map and Geography Libraries, 5(2):
114-130.
Kumar, B.A., 2011. Thin client web-based campus information system for Fiji National
University. International Journal of Software Engineering & Applications (IJSEA), Vol.2,
No.1, January 2011.
Lê Văn Phận, Nguyễn Kim Lợi, 2012. Approach to integrate local spatial data with Google
Maps. Nong Lam University Press (in Vietnamese).
Liu, S. B., and L. Palen, 2010. The New cartographers: Crisis Map Mashups and the Emergence
of Neogeographic Practice, Cartography and geographic Information System, Vol. 37,
No. 1, pp. 69-90.
Nguyễn Đăng Vỹ, 2010. An approach for development of a wide GIS system based on ESRI
technologies. Center for software development, Water Resources Research Institute. (in
Vietnamese).
Notepad++, 2015. About Notepad++. Available online at https://notepad-plus-plus.org/
Özyavuz, M., E.E. Şişman, A.B. Korkut, 2009. Namık Kemal Üniversitesi Yerleşke Bilgi
Sisteminin Oluşturulması. J. Tekirdag Agric. Facult. 6(3):227-234.

12
Pan, B., J.C. Crottsa, and B. Mullerb. 2010. Developing Web-Based Tourist Information Tools
Using Google Map. Available online at
http://www.ota.cofc.edu/pan/PanCrottsMullerDevelopingGoogleMap.pdf.
Pejic, A., S. Pletl, and B. Pejic, 2009. An Expert System for Tourists Using Google Maps API,
7th International Symposium on Intelligent Systems and Informatics, SISY '09.
Peterson, M. P., 2012. Online Mapping with APIs, Online Maps with APIs and Mapservices
(M. P. Peterson, ed.), Springer, pp. 3-12.
Porter, A. and M. Sherwin, 2013. The Digital Campus: The Online Future For Higher
Education. Available online at www.precedent.au.com
Roth, R. E. and K. S. Ross, 2009. Extending the Google maps API for event animation
mashups. Cartographic Perspectives, 64, pp. 21-31.
Scholefield, K., 2008. Web based map services for scientific tourism: a case study of eighteenth
and nineteenth century Edinburgh. Master of Science Thesis,
http://hdl.handle.net/1842/2475.
Tarhan,Ç., Ö. Saygin, A.K. Çinar, Y. Yetis, G. Basaran, 2012. A GIS-based campus
information system: Izmir Institute of Technology. Available online at
https://ideas.repec.org/p/wiw/wiwrsa/ersa06p305.html.
Trần Nam Phong, Đỗ Thành Long, Trần Thái Bình. 2014. Developing GIS and WebGIS
application using open source software. In Proceedings of the 2014 National GIS
Application Conference. Can Tho University, 28 - 29/11/2014.
UXPin Inc., 2015. Web design: Book of trends 2015-2016. Available online at
http://studio.uxpin.com/ebooks/web-ui-design-trends-2015-2016/
Xampp, 2015. Apache Friends - XAMPP 5.6.14. Available online at
http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/

13
Abstract ............................................................................................................................. 1
1 Introduction .................................................................................................................... 1
2 Methodology .................................................................................................................. 3
Designing the information system ................................................................................. 3
Web-based GIS mapping........................................................................................... 3
Design of the Database .............................................................................................. 4
Development of Web-based GIS application ............................................................ 4
Selected Tools ............................................................................................................... 5
Mobile and Web Browsers Compatibility ..................................................................... 5
3. RESULTS AND DISCUSSION ................................................................................... 6
The database for VNUA Maps ...................................................................................... 6
Use of JavaScript and CSS ............................................................................................ 7
Google Maps API scripts............................................................................................... 8
Online Map Interfaces ................................................................................................. 10
4. Conclusions ................................................................................................................. 10
Acknowledgements ......................................................................................................... 11
References ....................................................................................................................... 11

14