Ionic 4/5 Angular Google Maps with Places Search using @agm

In this tutorial, we will learn how to add Google Maps in an Ionic application using a powerful package @agm. The @agm package provides directive components to easily add Maps, Markers and Geometric shapes like Radius on Google Maps in Angular applications.

Here we will use the power of this great package to implement Google Maps with a Draggable Marker and Search bar for places in Ionic 5 application using Angular.

Let’s get started!

Create a new Ionic Application

To start from scratch we will create a new Ionic application with a blank template by running following NPM command in terminal:

Install Packages to use Google Maps

For using Angular Google Maps in the Ionic application we need to install @agm and Google Maps types by running the following commands:

Angular Google Maps

Google Map Type

 

Configurations

In the Ionic application, we need to import AgmCoreModule in the page’s module on which we are going to implement the Google maps.

So open home.module.ts file then import the AgmCoreModule package then add in the imports array as shown below with apiKey and 'places' set in libraries we want to use it.

 

Next to define the Google Map type, open the tsconfig.app.json file then place "googlemaps" under types property:

 

Adding Google Maps

Finally, we are going to add Maps to the Home page of the application.

In the home.page.html file paste below code:

To create a Google map we use the agm-map component directive which takes several input properties and emits output events as well. But latitude, longitude and zoom are important ones.

The agm-marker directive will add a marker on the map which is set be draggable by setting [markerDraggable] to true, it also emits the dragEnd event to get current coodinates on map.

In the home.page.ts file update the component class wit below code:

 

That’s it now you have an Ionic Application loaded with Google Maps with awsome places search and Draggable marker to move it and fetching coordinates.

 

 

Leave a Reply

avatar
  Subscribe  
Notify of