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

Introduction

Appery.io provides the Google Map component – a convenient way to work with Google Maps. The main benefit of using Google Map 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.

The following tutorials will show you how to use the Google Map component with all kind of its directives: Marker, Markers, Window and Windows:

Please find more about Google Map component here.

Before you begin

Tutorials level: intermediate.

Prerequisites: an Appery.io account.

Below you will find six independent sections with different features described. This way, you can complete only those ones you need.

But there are some prep steps you must take before proceeding with any of the tutorials below:

  1. From the Apps page, perform: Create new app > Bootstrap AngularJS App (you can also use Ionic AngularJS App), enter an app name and click “Create”. You’ll see a start page.
  2. To create the UI, drag&drop the Google Map component to the Screen1 page and define the two properties (Zoom = map.zoom, control = map.control) on the PROPERTIES tab. These will apply for all the apps described below.
  3. Function init() is also common for all the apps and should be defined with the following code from the start:

You can also create the app below from their backups. To create an app from the backup:

  1. Click Create new app.
  2. Click From backup, name your new app, and select the project backup file.
  3. Click Create.

Showing user location on the map via Geolocation service

App backup (Download)

First, let’s build an AngularJS app using the Geolocation service.

  1. The app UI will consist of:
    • the Google Map component:
      Select the Marker1 component (to do it, you may use breadcrumbs or the OUTLINE tab (open the components tree and then expand GoogleMap1) and define its properties like the following: Coords = myPosition, options = myPosition.options.
    • the Button component (set the Block property to True, Text = My Position, Type = success, and define ng-click as getMyPosition()).
      The result:
  2. To create the necessary services, you’ll use the Geolocation plug-in from Apache Cordova: CREATE NEW > From Plug-in > Apperyio Geolocation Service and click Import selected plug-ins.
    Three new Geolocation services and a .js files will appear under Project.
  3. Then, create a new model called marker in Project > Model and and define it:
  4. Now, switch to Screen 1 > SCOPE and, under the Variables tab, add a new variable – myPosition (Type = marker).
  5. Then, make corrections to the existing code of the init() function, so that it looks like the following:
  6. Now, add a new scope function – getMyPosition() which will be called on the My Position button click. Click Edit, from the snippets drop-down list, select Invoke service and, for the service name, type Geolocation_currentPosition (you may also click Backspace and then <CTRL> + <SPACE> to autocomplete the service name).
  7. In the Mapping editor for success event, create the following mapping:
  8. Click Save & Replace.
  9. Finally, add the next three code lines:

The resulting view of the getMyPosition() function:

Testing the app:
Test1

Adding multiple markers

App backup (Download)

The steps below show you how to place markers and get extra info on them upon clicking.

  1. In your project, open the DESIGN tab and add the next three in the following way:
    • the Google Map component:
      First, add a Marker by clicking the + sign:

      Set its properties: Coords = marker, id Key = marker.id, and ng-repeat = marker in customMarkers.
      Then, click the + sign in green to add a Marker's Window component:

      In PROPERTIES, click Edit for HTML, enter the following expression and save:
    • the Button component (Block = True, Text = Place Markers, and ng-click = placeMarkers()).
    • and the Input component (ng-model = customLocations).
      That’s all for UI:
      UI2
  2. Then, in SCOPE, make corrections to the existing code of the init() function, so that it looks like the following:
    3. Now, add another scope function: placeMarkers():

  3. To make it work, you’ll have to add one more service – Google Geocoding service:
  4. In the Builder: CREATE NEW > Service, type name ConvertAddress and click Create Service.
  5. In the Settings tab of the newly-created service, type the following URL:
    This is how the Settings tab should look like:
    SettingsTab
  6. 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 value for the sensor parameter:
  7. Switch to the Test tab and click Test. After the test finishes successfully, click Import as Response to fill the Response data.
  8. Lastly, add one more function: fitMarkers, add markers for Arguments, define its Type as Function, and insert the following:

You can save your project and test it:
Test2

Showing a separate window on a click

App backup (Download)

The steps below demonstrate how you can manage different map events in your projects.

  1. In DESIGN view, add one more property to the Google Map component (events = map.events) on the PROPERTIES tab.
  2. Add the Google Map Window component by clicking the Window+ sign:
    AddWindow
  3. Set its show property to singleWindow.show, Coords property – to singleWindow.coords, then click Edit for HTML,enter the following expression, and save:
  4. In SCOPE, under the Variables tab, add two new variables – dbMarkers and customLocations.
  5. Switch to the Functions tab and define the init() function as follows:
  6. Add one more function – mapClick() with map, e, args as Arguments andType = Function and provide it with the following code:

Clicking on the map when testing, you’ll get the parameters provided in the code:
Test4

Adding multiple markers from Appery.io database

App backup (Download)

Creating the database

Before you start building the app, you must create a database and a collection. The app will retrieve the collection data, and markers will be added to the map based on it.

Create the Markers collection with the following structure:
MarkersColl

On the screenshot above, there is a sample Markers collection, stored in the MapDB database.

You may also choose to create a database from the sample MapDB (in this case, unpack the sample .zip file first) or do it manually as described in this section below.

If you’ve already created the database, find the X-Appery-Database-Id:

And paste it to MapDB_settings > database_id.

Building the app

The steps below will guide you how to get markers from the database and place them on the map.

  1. In the project, go to DESIGN view and define the next UI components in the following way:
    • the Google Map component:
      First, delete the default Marker (to do it, you may use breadcrumbs or the OUTLINE tab (to open the components tree and then expand GoogleMap1).
      Then, add a Google Map Markers component by clicking the + sign and set its Models parameter to dbMarkers:

      Then, inside the Google Map Markers map area, click the + sign in green to add a Google Map Windows component, then, in PROPERTIES, click Edit for HTML, and enter the following expression:
      AddWindows
    • the Button component (Block = True, Text = Get Markers from DB, and ng-click = getMarkersFromDB()).
      This is how your resulting map UI should look:
  2. Perform CREATE NEW > Database Services and select the database you need (MapDB, in this example), expand the Markers collection, and select the List service:
  3. Then, switch to Project > Model and create two new models: marker and markers defined as follows:
  4. Now, in SCOPE, you must add a new variable: dbMarkers (Type = markers).
  5. After that, add another function – getMarkersFromDB(). Click Edit, then, from the snippets drop-down list, select Invoke service and, for the service name, type MapDB_Markers_list_service (you may also click Backspace and then <CTRL> + <SPACE> to autocomplete the service name).
  6. Then, in the Mapping editor, create the following mapping and save:
  7. Add the next expression to the code:
    Your getMarkersFromDB() function should look like the following:
  8. The last function to be added – fitMarkers (Arguments = markers,Type = Function) should be defined in the following way:

Testing the app:
Test4

Showing traffic layer

App backup (Download)

The steps below will guide you in creating an app showing traffic on the map and working with native Google Maps API rather than with AngularJS .

  1. The app UI will consist of:
    • the Google Map component (for settings, see here).
    • the Button component (set the Block property to True, Text = Show Traffic, Type = success, and ng-click = showTraffic()).
      The result:
  2. In SCOPE, add one more scope function: showTraffic() and insert this code when editing:
    The function applies to the specified location (New York City), which may be changed according to your preferences:

You may test the app:
UI5

Showing directions

App backup (Download)

The steps below will show you how to create a route from point A to point B.

  1. In DESIGN, define the next three UI components in the following way:
    • the Google Map component (for settings, see here).
    • the Button component (Block = True, Text = Show Directions, and ng-click = showDirections()).
    • two Input components:
      For the first Input, define: Placeholder = From, ng-model = directions.from.
      For the second Input, define: Placeholder = To, ng-model = directions.to.
      That’s all for UI:
  2. Now, switch to SCOPE and make corrections to the existing code of the init() function, so that it looks like the following:
  3. Add a new function – showDirections() with the following code:

When testing your app, you’ll get:
Test6

Adding reset function

When working with Google Maps, it’s can be handy to reset all the data attached to it. The function below resets all the features described above.

Go to SCOPE and add a new function (Type = Function): reset() with the following code:

Then, you can call this function in any time you, for example, on a button click:

Note: If you are adding a Google Map component to Modal screen, add an attribute ng-if = true to the component.