If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

Appery.io provides the Google Maps component – a convenient way to work with Google Maps. The main benefit of using the Google Maps component is that you can simply drag it on the page, configure it via the properties panel like any other UI component, and then use it as the Google Maps API via JavaScript.

This tutorial will show you how to use the Google Maps API when building a mobile app in Appery.io. You will learn how to:

  • Show directions from point A to point B.
  • Place a marker or multiple markers.
  • Place multiple markers based on the data retrieved from the database.
  • Add layers (such as the traffic layer).
  • Fit the map to the bounds.
  • Retrieve current user location via Geolocation service and display it on the map as a marker with custom icon.

The app will look like:
gmap_app_ui

Try it yourself

Live demo

See the live demo of this app here.

Creating from the backup

You can create this from the backup (Download backup) to see how it’s built.

To create an app from the backup:

  1. Click “Create new app”.
  2. Type an app name.
  3. Click “From backup” and select the project backup file.
  4. Click “Create”.

You still have to create the database manually as described in this section below. If you’ve already created the database, find the X-Appery-Database-Id:x-appery-Database-id1

And paste it to location_settings > database_id:database_id

Before you begin

Tutorial level: intermediate.

Creating a new app

Create a new app in the App Builder. From the Apps page, enter an app name, and click “Create”. You’ll see a start page.

Building the UI

The UI will look like:
ui_view

1. First, select the startScreen and change Predefined Screen Size to 480×800 in the PROPERTIES panel:
ScreenSize

2. Place the Map component on the page:
MapComponent

3. On the right, in the PROPERTIES panel, clear the Address value. Change the Zoom property to 2. Rename the component to google_map, and, finally, set Dimension to 300px:
Map Properties

4. The Map component contains a predefined marker component. The marker is not needed in this tutorial, because all the markers will be created programmatically. Select the marker by clicking on it or using the breadcrumbs:
MarkerComponent

5. In the PROPERTIES panel to the right of the screen, clear the Address and Text properties. Also, uncheck Visible:
MarkerProperties

6. It’s time to add the buttons and input fields. Place the Button on the page and rename it (change the Name property) to show_directions. Change the Text property to Show directions:show_directions_button

7. Place two Input components below the show_directions button.
8. Rename the first Input to from and the second one to to. Change the Text properties of these inputs to the locations you want. In this example, there is London for the from input, and Abu Dhabi for the to input:
from_and_to

9. Now, place the Button, which will trigger the marker placement. Change the button’s Text property to Place marker and rename it to place_marker:place_marker

10. Next, add the Input component below the place_marker button. Rename it to (change Name property) marker_location. Type in Text property location names, separated by a comma. For example – Chicago, Los Angeles, San Francisco:
addresses

11. Lastly, place three buttons on the page. Change the Text property of the first to Show traffic. Also, rename it to show_traffic.

12. For the second button, change the Text property to Get markers from DB and rename it to get_markers.

13. For the third button, change the Text property to Show my location and rename it to show_my_location:
three_buttons

That’s all for the UI.

Adding services and local storage variables

Three services and four local storage variables need to be created for this app. One service will get locations from the database, a second one will convert friendly location names to latitude and longitude values and the third one is a Geolocation service which will be used to determine the user’s location.

Local storage variables

Create the following local storage variables by navigating to Project > Model and Storage > Storage:

  • markerLat.
  • markerLng.
  • currentLng.
  • currentLat.

markerLat and markerLng variables will serve as temporary storage for the Google Geocoding service.

currentLng and currentLat variables will take the current location values returned by by the Geolocation service.

Here are how your local storage variables should look:local_storage_variables

List service

Before importing the List service, lets create a database and collection. The app will retrieve collection data, and markers will be added to the map based on it. Create a locations collection with the following structure:
LocationsData

In the screenshot above, there is a sample collection with the name locations, stored in the location database. Once its done, go to the Appery.io Builder and import the List service:

1. From the Appery.io builder: CREATE NEW > Database Services, select your database (location, in this example), expand the locations data collection, and select the List service:
ImportDBServices

2. Click “Import selected services”.

Google Geocoding service

1. From the builder: CREATE NEW > Service, type name ConvertAddress and click “Create Service”:
CreateConvertAddressService

2. In the Settings tab of the newly-created service, type the following URL:

This is how the Settings tab should look:
SettingsTab

3. Go to the Request tab and add two parameters – address and sensor. Type a mock value for the address parameter (for example Chicago) and false for the sensor parameter:AddressSensor

4. Switch to the Test tab and click “Test”. After the test finishes successfully, click “Import as Response” to fill the Response data:ImportAsResponse

5. Go to startScreen and switch to the DATA tab. For datasource, select Service, and then select ConvertAddress. Click “Add”. Rename the added service to convert_address:Convert_address

6. Then, on the DATA tab, click “Mapping” for Success event, and create the following mapping:ConvertAddressSuccessMapping

7. Click “Save and return”. Now, for datasource, select Service and then select location_locations_data_list_service (the name of this service is based on your database and collection names). Click “Add”. Rename the added service to get_db_locations:
LocationsServiceGetDB

8. By clicking a checkbox next to the “Add” button of Success event, from a drop-down menu, choose “Run JavaScript”, add the following code, and save:

9. There’s only one more event left for the Google Geocoding service; it places markers based on the converted values through the Google Geocoding service. Open the EVENTS tab, and add the following event: convert_address > Success > Run JavaScript.

Then add the following JavaScript:

10. Click “Save”.

Geolocation service

1. From the builder: CREATE NEW > Service. Check Geolocation and click “Create Service”:
geolocation_service

2. Go to startScreen and switch to the DATA tab. For datasource, select Device, and then select GeolocationService. Click “Add:geolocation_datasource_added

3. Then, on the DATA tab, click “Mapping” for the Success event, and create the following mapping:geolocation_mapping

4. Click “Save and return”.

5. Add a Run JavaScript event for the Success event of geolocation1 datasource:
add_run_java_script

6. Add the following JavaScript code and click “Save”:

This code will add a marker with custom icon on user position. That’s all for the services in this example.

Adding the JavaScript

It’s helpful to keep the bigger part of the code in a separate JavaScript file.

1. From the builder: CREATE NEW > JavaScript, enter the name GoogleMapJS, and click “Create JavaScript”. The new JavaScript file will be listed under the JavaScript folder.

2. Open the GoogleMapJS file and add the following code:

3. Save.

Adding events

Once the JavaScript file is ready, it’s time to map some events:

1. Open the DESIGN tab.

2. Select startScreen (use breadcrumbs), open the EVENTS tab, and add the following event: startScreen > Load > Run JavaScript.

3. Add the following JavaScript code:

4. Click “Save”.

Now we need to build the directions by clicking the show_directions button. Select the show_directions button and the following event:

1. show_directions > Click > Run JavaScript.

2. Add the following JavaScript:

3. Click “Save”.

By clicking the place_marker button, data is read from the input field marker_location and passed to the service that converts location names to latitude and longitude. Select place_marker, and add the following event: place_marker > Click > Run JavaScript.

4. Add the following JavaScript:

5. Click “Save”.

By clicking the show_traffic button, the traffic layer will be added to the map. Select the show_traffic button, and add the following event: show_traffic > Click > Run JavaScript.

1. Add the following JavaScript:

2. Click “Save”.

By clicking the get_markers button, data will be downloaded from the database, and location names will be converted to latitude and longitude values. Select get_markers, and add the following event: get_markers > Click > Invoke service > get_db_locations and click “Save”.

By clicking the show_my_location button, the Geolocation service will be triggered. Once the Geolocation service will return success, the marker on the retrieved location will be added. Select show_my_location and add the following event: show_my_location > Click > Invoke service > geolocation1.

Now, all startScreen events should look like:all_events

The final app will look like:
app_view

To show traffic, you need to zoom in the map:
traffic

Using Google Maps API key

Read this thread if you want to use your own Google Maps API key: https://getsatisfaction.com/apperyio/topics/how-to-use-your-own-google-maps-api-key