Saturday, 1 December 2012

Developing a mobile trip planning app with Google Places API - Step by step tutorial

Mobile Trip Planning App - Step by step tutorial

This is a step by step tutorial to explain the coding involved in developing a simple mobile trip planning application using Google Places API. The underlying technologies are HTML , CSS , JavaScript,JQuery Mobile, Google Places API and Panoramio API. If you do not know Google Places API & Panoramio API no need to worry - this tutorial has enough information to understand the example. 

At the end of this tutorial you will be able to develop something similar to the live example I have created : Mobile Trip Planner

Below are the requirements for the mobile travel planner
  • When the user types the trip destination it should offer auto complete support
  • User should be able to search for the following information within a given radius of the tour destination
    • Things to do
    • Hotels , Restaurants, Cafe , Bar, Bank, ATM, Airport, Bus station , Train station etc - pretty much everything that someone would need to know
  • When the user types the trip destination the app should automatically display the photos of the key attractions around that place for inspiration
  • Automatically display a link to the wiki travel guide to the trip destination
  • Automatically display the wiki page associated with the points of interest part of search result from google (if one available in wiki) 

Developing the user interface

Please refer to the Trip Planner HTML file to get a feel of the user interface we are developing. You can right click and view the page source for the complete code  
Below is a description of the JavaScript & CSS dependencies for this example

The key elements of html code below with comments.

Searching for Points of Interest 

When user selects a choice on various available points of interest from the select box an appropriate value is assigned to the attraction type. These types have been taken from the supported types by Google Places API.

Even though majority of the attraction types are self explanatory I feel it is worth explaining "things to do"  - same holds good for food, store, worship and medicine.When user selects "things to do" from the drop down internally a search is performed on the following types - 'art_gallery','establishment','museum','amusement_park','zoo','stadium','aquarium','bowling_alley','casino','park'

You can change this based on your requirements, for example you may exclude stadium from points of interest if you do not like to display them in your results

Auto complete for destination 

The necessary code for supporting auto complete feature is part of the application specific JS file

Search using Google Places API

The below Javascript is pretty much self explanatory. I have picked only the relevant snippets from the JS file. This is handled within the Javascript function findPlaces()

Panoramio Integration for displaying Photos

Refer to the JavaScript snippet below for the details on how the Panoramio API is invoked and the photos are displayed within the widget

Wikipedia and Wikitravel Integration

Refer to the relevant snippets on how the Wikitravel URL to the tour guide and Wiki URL to the point of interest is generated. Please go through my blog Integrating Google Places API with Wiki Services for more detailed information on how these URLs were formed.

Please note that the JavaScript and HTML code used in this tutorial is not optimized for production use. I strongly recommend to re-write the code as appropriate if you plan to use this in production.



    Affinity is a unique facebook application for sun sign(zodiac sign) compatibility check(affinity match) between you & friends. It allows people to compare sun sign predictions with real word evidence. It's capability for endorsing/badging people's qualities makes it unique from other applications. Affinity is the first application of its kind designed to seek the real truth behind sun signs by allowing people to match sun sign predictions with ratings from friends.

  2. My new blog :

    A practical guide to measuring IT services based on business outcomes. This is a step by step approach to move towards business outcomes based SLA model while delivering IT services to customers. This whitepaper explains how to report IT systems based on the business outcomes they deliver and the benefits of this model.

  3. is that possible to search outdoor / adventure activities using google places api? because it seems like not covering under google supported types

  4. Love it! In Future reference really bookmark your blog,Thank you so much for sharing this one Travel App Provider such a Great concept for work in this field, Thanks again all Kind of peaceful info,Love it-
    Travel app development