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.

Integrating Google Places API with Wiki Services

Google Places API, Wikitravel & Wikipedia

As you might already know Google Places API is an extremely powerful mechanism to locate the important attractions on earth. If you have not used Google Places API before please go to the Google documentation which is a good place to start  

This API allows you to retrieve all the attractions pertaining to a particular place on earth. Below are some of  attraction types returned by Google APIs per place:  amusement_park , aquarium , art_gallery ,church ,museum , zoo etc

If you are planning to write a tour travel/trip planning application , then using Google APIs would be a natural choice to automatically retrieve all the tourist attractions available at the tour destination. But the challenge here is that we need a very good description of the tourist attraction which is not directly available in search response. From a user standpoint the search is not complete if it does not include additional details related to that attraction. The question is how do we make the search results more user friendly by associating them to an authentic source of information? I faced this challenge myself while writing a travel app and this is how I solved it ...

If you have used Wikipedia ever you would not deny that it is the most trusted source of information for anything in internet. I made an attempt to integrate Google Places API response with Wiki pages.  Below are the two things I wanted to achieve out of this integration

1. When someone is searching a tour destination automatically display a hyper link to the travel guide to that destination from wikitravel

2.For each search result part of Google Places API response display a hyperlink it to the corresponding Wiki page related to that attraction from wikipedia

You can see a live example which I have written: My TripChatBox Planner

This simple integration was possible because I could observe an interesting naming convention followed by the Wiki pages & Google.

1.Automatically Populate Travel Guide Link

Let us assume a customer is searching for Los Angeles in the above trip planner.
It would useful if we are able to guide the user with a travel guide to Los Angeles.

All we need to do to get a travel guide to this place is to generate a URL pointing Wikitravel website.

• Here the place name is : Los Angeles
• Now replace the spaces in the place name with underscore : Los_Angeles
• Append this to the wikitravel URL as below 

Desktop URL

http://wikitravel.org/en/Los_Angeles

Mobile URL

If you want the travel guide in mobile then you need to construct a URL like
http://m.wikitravel.org/en/Los_Angeles

If the place name does not have a space then its more easy , simply append the place name to wikitravel URL

Desktop URL

http://wikitravel.org/en/London

Mobile URL

http://m.wikitravel.org/en/London

2. Automatically populate a Wiki Link to a tourist attraction

The same approach of replacing spaces with underscore character holds good for displaying a Wiki page associated with an attraction part of Google Places API search response - the only difference is that we point to Wikipedia rather than wikitravel 

For example you will get Westminster Cathedral as one of the attraction as part of the attraction search results associated with London from Google Places API. In order to get a wiki page associated with this attraction simply follow the principle above. 

Two example URLs below

Desktop URL

http://en.wikipedia.org/wiki/Westminster_Cathedral

Mobile URL

http://en.m.wikipedia.org/wiki/Westminster_Cathedral

This integration was possible because the naming conventions followed for  attractions between Wiki and Google Places are matching !!

I hope my article helps you to quickly link two powerful sources of information on earth : Google Places API and Wiki.

If you are interested on a step-by-step tutorial  please refer my blog Developing a travel planning app with Google places , Wiki and Panoramio API.

What I have given above is a short-cut , but there are other ways as well to get useful information regarding places. Some references below

1. The Geolocation API for WikiPedia

2. WikiSherpa API

References :

• Google Place Search-box
• Google Places Auto Complete
• Google Place Details

Next >>: Developing a travel planning app with Google places , Wiki and Panoramio API.