Online Map Service Using Google Maps API and Other JavaScript Libraries: An Open Source Method

  • Shunfu Hu
Part of the Lecture Notes in Geoinformation and Cartography book series (LNGC)


There has seen increasing interest in developing online map services using Google Maps Application Programming Interface (API), Yahoo! Maps API, Microsoft Bing Maps API, Nokia Ovi Maps API, and ESRI ArcGIS API. However, such online map services are mainly “mashups” in nature, meaning that they utilize Maps API as a platform and combine other spatial data from multiple sources to create new services. The objective of this chapter is to demonstrate an online mapping application that focuses not only on the functionality to display points of interest with customized icons and the information associated with them, but also on the sophisticated functionalities for marker clustering, searching, filtering, and tabbed interface that offer the user the capability to manipulate the data, which is lacking in most documented web mapping services. A case study of developing an online map service to display the locations of hundreds of gardens on the Internet for the United States Department of Agriculture (USDA) People’s Garden initiative is presented. Google Maps API, Google Geocoder and other JavaScript libraries such as jQuery, XML, MarkerClusterer, Spry Framework for Ajax, all free and open source, are employed to develop this online map service. It is anticipated that the online map service demonstrated here can be used in most of the web browsers such as Microsoft Internet Explorer (IE) 7.0+, Google Chrome, Mozilla Firefox, and Apple Safari.


Application Program Interface Relational Database Management System Cascade Style Sheet Keyhole Markup Language Keyhole Markup Language File 
These keywords were added by machine and not by the authors. This process is experimental and the keywords may be updated as the learning algorithm improves.



The author would like to thank three graduate students, Teresa Kysor, Bradley Craddick, and Rachel Byrd, at the Department of Geography, Southern Illinois University Edwardsville for their assistance in compiling the information for over 600 gardens. Their hard work made this project possible.


  1. Adobe (2011) Working with Spry 1.6. Accessed 10 May 2011
  2. Bildirici IO, Ulugtekin NN (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, Orlando, FL, 15–19 NovemberGoogle Scholar
  3. Chow TE (2008) The potential of maps APIs for internet GIS applications. Trans GIS 12(2):179–191CrossRefGoogle Scholar
  4. Haubrock S, Wittkopf T, Grünthal G, Dransch D (2007) Community-made earthquake intensity maps using Google’s API. In: Proceedings of the 10th AGILE international conference on geographic information science, Aalborg, Denmark, CD, 8Google Scholar
  5. Hu S (2012) Multimedia mapping on the Internet using commercial APIs. In: Peterson MP (ed) Online Maps with APIs and WebServices. Springer, Berlin, pp (need page number for this chapter in this book)Google Scholar
  6. Jhnidk (2010) Use PHP, MySql and Google Map API v3 for displaying data on map. Accessed 10 May 2011
  7. Johnston LR, Jensen KL (2009) Maphappy: a user-centered interface to library map collections via a Google maps “Mashup”. J Map Geogr Libr 5(2):114–130CrossRefGoogle Scholar
  8. jQuery (2011) The write less, do more, JavaScript library. Accessed 9 May 2011
  9. Liu SB, Palen L (2010) The new cartographers: crisis map mashups and the emergence of neogeographic practice. Cartogr Geogr Inf 37(1):69–90CrossRefGoogle Scholar
  10. Mahe L, Broadfoo C (2010) Too many markers! . Accessed 28 Apr 2011
  11. MySQL (2011) The world’s most popular open source database. Accessed 12 May 2011
  12. Niccolai J (2008) So what is an enterprise mashup, anyway? Accessed 12 Dec 2010
  13. Pan B, Crottsa JC, Mullerb B (2010) Developing web-based tourist information tools using Google Map. Accessed 7 May 2011
  14. Pejic A, Pletl S, Pejic B (2009) An expert system for tourists using Google Maps API. In: 7th international symposium on intelligent systems and informatics, SISY ’09, SuboticaGoogle Scholar
  15. Peng X, Wu X (2010) Digital campus map publishing based on Google Map API. J Geomatics 35(1):25–27Google Scholar
  16. Peterson MP (2007) International perspectives on maps and the internet: an introduction. In: Peterson MP (ed) International perspectives on maps and the internet. Springer, Berlin, pp 3–10Google Scholar
  17. PHP (2011) What is PHP? Accessed 9 Feb 2011
  18. Roth RE, Ross KS (2009) Extending the Google Maps API for event animation mashups. Cartogr Perspect 64:21–31Google Scholar
  19. Scholefield K (2008) Web based map services for scientific tourism: a case study of eighteenth and nineteenth century Edinburgh. Master of Science Thesis.
  20. Udell S (2009) Beginning Google maps mashups with mapplets, KML, and GeoRSS. Apress, New YorkGoogle Scholar
  21. United States Department of Agriculture (USDA) (2011) People’s garden initiative. Accessed 9 Feb 2011
  22. W3Schools (2011) XML basics and XML JavaScript. Accessed 9 May 2011

Copyright information

© Springer-Velag Berlin Heidelberg 2012

Authors and Affiliations

  1. 1.Department of GeographySouthern Illinois UniversityEdwardsvilleUSA

Personalised recommendations