Build a Location-Based Mobile App With HTML5 & Javascript: 1

Share this article

You don’t need separate platform-specific technologies to develop powerful, useful apps. You’d be surprised with what you can build with HTML5 and popular JavaScript libraries. This article is the first of a series in which I’ll develop a mobile app purely through HTML5 and JavaScript frameworks. The app will be called “Where I parked my car”, and we’ll build it with jQuery Mobile and Cordova (also known as PhoneGap). In this first article, I’ll explain the app’s features and which languages and frameworks you need to know in order to follow the tutorial. To create this application, I’ll also use the new HTML5 API, specifically the local storage and the geolocation (actually not really part of the HTML5 specs), as well as the Google Maps API. A hybrid app is built using web technologies, and then wrapped in a platform-specific shell that allows it to be installed just like a native app. If you want an overview of the differences between native, hybrid, and web apps, I’ll advice you to read Native, Hybrid or Web Apps?.

Uncovering the Features

The aim of “Where I parked my car” is to let you bookmark where you parked your car on a map using the GPS function of your smartphone, and then—after you have finished your walk—find a route to return to it. This kind of application is useful if you don’t have a good memory or if you’re in a foreign city. In addition, “Where I parked my car” will also save a log of your saved positions (up to 50), so that you can retrieve a location for future use. Since scrolling a list of 50 items can be really annoying, the app will have a search filter so you can easily achieve the task. The list allows you to see the position on a map, and you can also to delete one or more old locations. Finally, I’ll also create a small credits page within the app.

The Ingredients

To fully understand what’s going to be developed, you must have at least a basic knowledge of the following languages and frameworks:
  • HTML: It will be used to create the markup of the pages. Where appropriate, I’ll use some new HTML5 tags.
  • CSS: Since most of the CSS enhancements will be done by jQuery Mobile, it isn’t really needed extensively. However, I’ll use few rules to correct or adjust some styles as you’ll see later.
  • JavaScript: The business logic is entirely written in JavaScript so if you don’t know some key concepts like what’s a callback or a closure, you’ll need to study it before proceeding.
  • jQuery: I’ll use jQuery mainly to select elements and attach event handlers, so there’s nothing special here.
  • jQuery Mobile: It’ll be used to automatically enhance the application interface. I’ll use the page loading widget, the listview for the positions’ log, and I’ll put some buttons inside the header and the footer of the pages to build a toolbar.
  • Cordova (PhoneGap): As said before, Cordova will be used to wrap the files so you can compile them as if you built a native app. Of course, I’ll take advantage of some of the APIs offered by the framework, such as notifications, geolocation, and connection
The version of jQuery Mobile used will be 1.2.0, so if you need a refresher on what’s new in this version, you can read What’s New in jQuery Mobile 1.2.0? and Build Lists and Popups in Minutes Using jQuery Mobile. The Cordova version used will be the 2.0.0. I choose this rather than the newer versions, because in my tests it has performance better in conjunction with jQuery Mobile. Apart from the above list, I’ll use also these APIs:
  • Geolocation API: It provides location information for the device in the form of latitude and longitude. Since many operating systems already support it, Cordova will use the native interface rather than its own implementation. However, for the platforms that don’t have this API, Cordova uses its implementation that adheres to the W3C specification. If you need an introduction to this API, you can read Using the HTML5 Geolocation API.
  • Google Maps API: The Google Maps API lets you integrate the Google Maps service with your website. The service is completely free, but you should subscribe to the APIs console website to obtain your own API key, and use it when you send a request to the service. Since this API will still work without the key, I’ll use it without a unique API key.
  • Web Storage API: This provides access to the devices storage options. If you need a starting point, you can take a look at An Overview of the Web Storage API.
Remember that Cordova uses a different JavaScript file for every operating system, so if you’d like to compile the application on your own, you need to use a specific IDE-SDK bundle like Eclipse and the Android SDK, Visual Studio and the Windows Phone SDK, and so on, for every platform. This could be a real pain, so “Where I parked my car” will be developed with the assumption that the compilation will be done using the Adobe cloud service, called Adobe PhoneGap Build. It’ll be the service itself that includes the correct Cordova library for each platform at compiling time. So, to follow this tutorial, you can use a simple text editor or the IDE that you prefer to use, for example NetBeans, without installing any other SDK. I’ll release the final code on my bitbucket repository
, where I’ll remove the library as specified by the Adobe PhoneGap Build doc.

The Project’s Structure

The structure of the project will be quite straightforward. In fact, I’ll create the HTML files, the Adobe PhoneGap Build configuration file, the standard splashscreen, and the app’s icon in the root of the project. Then, I’ll divide the other files into three categories (actually folders): CSS, images, and JS. To develop “Where I parked my car”, in addition to the jQuery, jQuery Mobile, and Cordova files, I’ll create the following documents:
  • index.html: This is the entry point and will include all the libraries’ files used throughout the application. It’ll also have the buttons to set and get the current position and to view the positions’ log.
  • map.html: This is where you’ll see the map that will show you your position, your car position, and the route to reach it.
  • positions.html: This page will show the positions’ log as a list.
  • aurelio.html: This is the credits page. Nothing very interesting here.
  • style.css: As I said before, I’ll write few style changes that deviate from the jQuery Mobile standard style.
  • It’ll contain a configuration for jQuery Mobile
  • functions.js: This file will contain the function to initialize the application and some other utility functions.
  • maps.js: This file will have the functions that use the Google Maps API to draw the map and the route to the car.
  • positions.js: This file will save and load the previous positions using the Local Storage API.
  • config.xml: This XML file will contain the metadata of the applications and will be used by the Adobe cloud service to store settings like the app version number and the package contents.
At this point, you might argue that since we’re building a small app, I could use a single file that has all the pages combined. You’re absolutely right, but I prefer to keep things separated for organization.

Setting Up the Project

First of all, create the project folder, for example “where-i-parked-my-car” and create the three folders mentioned above: CSS, images, and JS. Now, you need to download the jQuery, jQuery Mobile and Codova files. Place all the JavaScript files of these frameworks inside the “JS” folder, put the jQuery Mobile bundled images in the “images” folder, and finally put the jQuery Mobile CSS file inside the “CSS” folder. If you’ve done everything right, the project should have the following structure:
|   ---style.css
|   ---ajax-loader.gif
|   ---icons-18-black.png
|   ---icons-18-white.png
|   ---icons-36-black.png
|   ---icons-36-white.png
|   ---cordova-2.0.0.js
|   ---jquery-1.8.3.min.js
As said before, a reference to the Google Maps API is required. Including the file that you need is very simple and consists of just adding the following line to your HTML.
<script src=""></script>
Please note that this line contains a sensor
parameter. It must be included in the URL and set to true if you’re using a sensor (like a GPS), or false otherwise. Since we’re using the Maps API to create a mobile app, we’ll set it to true.


In this first and introductory article, I showed the features of “Where I parked my car” and outlined an overview of the technologies that will be used for its implementation. I have structured the files that comprise the application in an organized fashion so that we can move straight toward developing. Finally, I explained how to set up the project. In the next article I’ll dive into the code and show you how to create the HTML pages.

Frequently Asked Questions on Building a Location-Based Mobile App

What are the key features to consider when developing a location-based app?

When developing a location-based app, there are several key features to consider. First, the app should have real-time tracking to provide users with accurate location data. This can be achieved through GPS technology. Second, the app should have a user-friendly interface that makes it easy for users to navigate and use. Third, the app should have a geofencing feature, which allows businesses to set up virtual boundaries and send notifications to users when they enter or leave these areas. Lastly, the app should have social sharing capabilities to allow users to share their location with friends and family.

How can I ensure the privacy and security of users when creating a location-based app?

Ensuring the privacy and security of users is crucial when creating a location-based app. You can do this by implementing strong encryption methods to protect user data. Also, make sure to only collect necessary location data and provide users with clear information about how their data will be used. It’s also important to give users the option to opt-out of location tracking.

What are the challenges in developing a location-based app?

Developing a location-based app comes with several challenges. These include ensuring accurate location tracking, dealing with privacy and security concerns, and providing a seamless user experience despite varying network conditions. Additionally, developers must also consider the battery consumption of the app, as location-based services can drain battery life quickly.

How can I monetize a location-based app?

There are several ways to monetize a location-based app. These include in-app advertising, where businesses pay to advertise within your app, and premium features, where users pay for additional features or services. Another method is through partnerships with local businesses, where you can offer special deals or promotions to your users based on their location.

What technologies are used in developing a location-based app?

Several technologies are used in developing a location-based app. These include GPS for tracking user location, APIs for integrating with other services, and various programming languages like HTML5 and JavaScript for building the app. Additionally, you may also use technologies like geofencing and beacon technology for more advanced location-based features.

How can I improve the accuracy of location tracking in my app?

Improving the accuracy of location tracking in your app can be achieved by using a combination of different technologies. For instance, you can use GPS for outdoor tracking and Wi-Fi or Bluetooth for indoor tracking. Additionally, you can also use algorithms to filter out noise and improve the accuracy of location data.

How can I test my location-based app?

Testing a location-based app can be challenging due to the need to simulate different locations. However, you can use tools like mock location apps or GPS spoofing tools to simulate different locations during testing. Additionally, you should also test the app under different network conditions to ensure it works well in all scenarios.

How can I make my location-based app more user-friendly?

Making your location-based app more user-friendly can be achieved by designing a clean and intuitive user interface, providing clear instructions on how to use the app, and ensuring the app performs well under different conditions. Additionally, you should also consider the privacy and security of users and provide them with options to control their location data.

What are some examples of successful location-based apps?

Some examples of successful location-based apps include Uber, which uses location data to connect drivers and passengers, and Pokemon Go, which uses location data to create an augmented reality gaming experience. Other examples include Yelp, which uses location data to provide users with recommendations for nearby businesses, and Foursquare, which uses location data to provide personalized recommendations based on a user’s location and preferences.

How can I keep users engaged with my location-based app?

Keeping users engaged with your location-based app can be achieved by providing valuable and relevant content, offering rewards or incentives for using the app, and regularly updating the app with new features or improvements. Additionally, you should also consider integrating social features to encourage users to share their location or experiences with others.

Aurelio De RosaAurelio De Rosa
View Author

I'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.

jQuerymobile web tutorials
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week