Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

Ionic 4 Google Maps Tutorial

In this tutorial, we will demonstrate how to use this component in an Ionic 4 app. As part of the app design, we are going to add a Geolocation service to show current coordinates on the map.

Appery.io provides an Ionic 4 Google Map component. You can simply drag it to the page, configure it via the PROPERTIES panel like any other UI component, and then use it with the Google Maps API via JavaScript.

Getting Started

Before you begin, don't forget to set up a Google Maps API key for yourself if you haven't already. It's required for the Google Maps component to work correctly in your app. Learn how to get your API key from this guide. And, be careful with API restrictions. (You can read about these here.)

Creating the New App

  1. From the Apps tab, click Create new app.
  2. Select Ionic 4 as the application type, enter an app name, and click Create:
Create new app

Create new app

  1. You will see a Start page. On the left side, expand the Project folder and go to App Settings > Components. Set your own Google API Key to the Browser API key field:
Google API Key

Google API Key

  1. Then navigate to App Settings > Cordova plugins and enable the Geolocation plug-in:
Geolocation plug-in

Geolocation plug-in

Building the UI

Next, we set up the UI, consisting of a Google Map component and a Button component.

  1. Open Screen1 and go to its DESIGN tab. Click on the Toolbar title in the app screen and change it to Google Maps App by changing the Text property on the right menu.
  2. Drag & drop the Button component to the screen and set its Text property to Get Current Position.
  3. Then, drag & drop the Google Map component to Screen1.
    The resulting app:
Resulting app view

Resulting app view

Defining the Application Logic

Next, we "wire" things together in the app.

  1. Open the CODE tab. Add lat and lng as Number variables:
Add lat and lng variables

Add lat and lng variables

  1. Go back to the DESIGN tab. Select the Google Map component (for your convenience, you can use the OUTLINE tab or do it by selecting the needed component in the breadcrumbs menu) and set its View point properties to: Latitude = lat, Longitude = lng:
Define lat and lng variables

Define lat and lng variables

  1. Then, select Google Map > Marker1 and set its Coords properties to: Latitude = lat, Longitude = lng:
Define Marker coordinates

Define Marker coordinates

  1. Click the Get Current Position button (Button1) and expand the EVENTS panel from the bottom. There, for the Button 1 component, select the Click event, and, for action, set Run TypeScript inserting the following code:
let _this = this;

let onSuccess = (position) => {
    _this.lat = position.coords.latitude;
    _this.lng = position.coords.longitude;
};

function onError(error) {
    console.log('code: ' + error.code + 'n' + 'message: ' + error.message + 'n');
}

navigator.geolocation.getCurrentPosition(onSuccess, onError);
Set Click event

Set Click event

  1. Click the Save button to save all the changes.

Testing the App

Now, you are ready to test your app. Click the Test button in the App Builder to launch the app in the browser.

That's it.

Troubleshooting

"This page didn’t load Google Maps correctly" error

"This page didn’t load Google Maps correctly" error

If you encounter this issue, make sure that the Google Maps Platform billing is enabled. To use the Maps JavaScript API, add the API key to all API requests and enable billing for each of your projects. You can read more about it here.

Ionic 4 Google Maps Tutorial


In this tutorial, we will demonstrate how to use this component in an Ionic 4 app. As part of the app design, we are going to add a Geolocation service to show current coordinates on the map.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.