Building a mobile app with Google Map and Geolocation

What are we going to build?

This tutorial shows how to build an app that takes a user-entered location and shows it on Google Map. It also uses Geolocation to show user’s current location. The app looks like this:

Before you start

Tutorial level: Intermediate

Creating a new app

Create a new app in Tiggzi app builder. From Apps page, enter app name (use any name you want) and click Create.

Creating the mobile UI

Open startScreen and create the following UI:

• Input component with ‘Enter location…’ as placeholder. Rename the component to: input
• Two buttons.
• Google Map component.
  • Rename the component to: map
  • Once the component is added, click the white box in the middle of the map and delete it.
  • Select the map and click Show marker in Properties

You may test this page by clicking the Test button.

Showing user entered location on the map

To show a custom entered location, we need to read the value entered in the input field and update the map with its location.

1. Run this JavaScript on first button (Show on map) click:

   var location = Tiggzi ('input').val();
   if (location == '') {
      alert ('Please enter a location.');
      return;
   }
   var map = Tiggzi('map');
   map.options['address'] = location;
   map.refresh();

   We first read the value from the input component using Tiggzi JavaScript API.
   We then do a basic check to make sure something was entered.
   We get a reference to the map and update the map with new location. Then refresh the map.

2. Save (don’t forget to click Add event button).

Testing the app

Launch the app in the browser. You can enter a location such as Miami, or Boston, MA or any address, then click Show on map.

Showing user current location with Geolocation

To use Geolocation, we first need to add the Geolocation service to this app.

1. From Project view, select Create New > Service
2. Select Geolocation and click Create Service
3. Open Data view
4. Add Device > GeolocationService > Add. The service is now added to the page:
   
5. Open Edit Mapping
6. We don’t need to map anything for request (we will use all defaults) so switch to Response tab.
7. Create the following mapping:
   
   We will read the latitude/longitude values from the Geolocation services and map them to the Google Map component.
8. Save
9. While still in mapping view, open Events tab. We need to refresh the map once the Geolocation service is invoked.
10. Add the following event: geolocation1 (Component) > Success (Event) > Run JavaScript (Action):

    var map = Tiggzi('map');
    map.options['address']='';
    map.refresh();

    In addition to updating the component, we also need to set the address to a blank value.

11. Click Add Event and then Save.

We are done and can now test the app.

Testing the app

Launch the app in the browser and click Show my location button.

A few things to keep in mind.

• For Geolocation to work, you need to enable the browser to track you location. This can be done in settings. You will also need to do this when testing the app on the phone. For example, Chrome (desktop) will display the following icon when you allow to track your location:
  
  
• Geolocation works in browser and when running as a native app. Geolocation API is supported by all modern browsers.
• Your location might be off when testing in desktop browser as the location could be determined by your IP address. Location is more precise when testing on the phone.