Appery.io provides the Ionic 4 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.

Before You Start

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.)

📘

You can also check our instructional video that shows how to use the Google Maps component in Ionic 4 apps here:

Creating 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:

3. 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:

4. Then navigate to App Settings > Cordova plugins and enable the Geolocation plugin:

Building 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:

Defining Application Logic

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

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

2. 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:

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

4. Click the Get Current Position button (Button1) and expand the EVENTS panel from the bottom. There, for the Button1 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);

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

App Testing

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

If you encounter this issue, make sure that 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.

📘

You might also like our Appery.io Community video that shows how to use the Google Maps component to get current geolocation with Appery.io Geo Service plug-in: