Looking for something that's not here? Let us know: support@tiggzi.com

Building Google Map App with Geolocation

In this tutorial we are going to show you how to build an app that uses Google Map to display user-entered address and also determine user's current location by using Geolocation service. If this is your first time creating a mobile app in Tiggr, we recommend first to try the Building Twitter Search App, Building Weather App or Building Hello World HTML5 Mobile App With Local Storage tutorials as this is a more advanced tutorial. 

Create new app

Let's start by creating a new mobile project. 
  1. To start, we are going to create a new app. From Apps tab, click Start Now button
  2. Under App Builder, click Go
  3. Under Mobile App, click Start Now 
  4. Select Blank Mobile App app and click Next Step button
  5. Enter MapAndGeolocation for app name and click Create. 

Building the UI

Once the editor loads, you will see a blank screen in the middle of the screen. 
  1. Double-click on Caption label in the phone header and change the label to Location App. 
  2. Staying in Properties, uncheck Show Footer property. The result should look like this: 


  3. Drag and drop Input component
  4. Delete its default label, then in Properties set Text property to: Location (zip, city, or address)... and check Placeholder check box. 
  5. Change component name to location. 
  6. The result should look like this: 


  7. Let's test the UI, to get an idea how it's going to look in browser. Click the Test button to open the app in browser. If you make the app public (Test > Public), you can also test the app on your mobile device. 
  8. Next, drag and drop two Button components, set their labels and icons as shown below (you can pick any icon in Button properties, position the icon on the right):


  9. Next, drag and drop Google Map component under the Show My Location button:


  10. Test the app in browser. By default, the map will show Concord, CA location. 
  11. Go to Properties and change Address property to any location of your choice. 
  12. Check Show Location.
  13. Click inside Add Components Here area in the map, then go to Properties and uncheck Show Info. 
  14. Staying in Properties, delete Concord, CA from Address property. The result should look like this: 


Updating app look and feel

The default theme is Blue. Let's make some changes to the app look and feel. 
  1. Select the mobile screen (click outside the phone frame) and change the theme to Gray. 
  2. Select the screen header and change its theme to Black. 
  3. Select the first button and change its theme to Black. Repeat the same for the second button. The result should look like this: 


Using Geolocation component

Now that we have the app UI, let's add functionality to the first button where any user-entered location can be shown on the map. On button click, we are going to read the value from the input field and reposition the map based on the input. 
  1. Select Show Location button and switch to Events. 
  2. Select Add Event > Click. 
  3. Select Add Action > Run Custom JavaScript.
  4. In the custom JavaScript window, enter the following: 

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

  5. Let's look at this JavaScript
    • In the very first line, we use Tiggr JavaScript API to get the input component. 
    • Then we do very basic validation, to make sure some input was entered
    • Next, we again use Tiggr JavaScript to get the map component. 
    • We set the new address and then refresh the component. 
  6. Click OK.
  7. Test the app in the browser and then on a mobile device. For example, using New York, NY as input:


Updating the app to get user's current location

Let's now use Geolocation service to get user's location and feed that information to the map. 
  1. Open Palette > Device. 
  2. Drag and drop Geolocation component into the screen. Once the component was dropped, it will be shown on the left-hand side: 


  3. As any service, Geolocation has inputs and outputs. For service input, we are going to keep all default values. You can see the default input parameters and their values by clicking Data Mapping tab


  4. Now click on Response Mapping button and define the following connections:


    We are taking location information from Geolocation service and using it as input to the map component. 

  5. Click Save. 
  6. We also need to refresh the component based on new latitude/longitude information. We are going to use service's Success event. We want this code to run right after the service finishes successfully. Select the service and open Events tab. 
  7. Select Add Event > Success.
  8. Then select Add Action > Run Custom JavaScript.and enter the following:

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

  9. In the first line we get the map component using Tiggr JavaScript API. We then reset the address property as Google Map component the address property takes precedence. If the address is not reset, the component will not work properly. Lastly, we refresh the map. 
  10. Click OK to save and exit. 
  11. One last thing we need to do is invoke the service on button click. Select the Show My Location button, open Events tab. 
  12. Select Add Event > Click.
  13. Select Add Action > Invoke Service.
  14. Select geolocation1 service from the list and click OK.
  15. Test the app in browser and mobile device. 
    • Notes
      • The browser (desktop and mobile) will ask you to enable location tracking
      • On Android, you maybe need to enable location by going to Settings/Privacy Settings in browser
      • When running the app as mobile Web, Geolocation service uses browser location service. When running the app as native, geolocation service is delegated to PhoneGap API. 

Summary

In this tutorial we have showed you how to use Google Map component and also Geolocation service. A few things to keep in mind. Remember to refresh the map when changing map location and reset the map address property when using latitude/longitude to determine location. 

What's next