Google Maps on Your Ionic4 Project w/ Angular

Ionic

The advantage of Ionic is that if you have knowlegde of some Web Development Framework (e.g.: Angular, React, Vue or pure Javascript), then you can start creating Cross-Platform Mobile Apps right away. This means a reduced learning curve and increased productivity.
Nevertheless, some people may say that an Ionic App is not a native one, and also that it can generate an app that is slower than a "real" native one made with Flutter or Kotlin. Ok... But we cannot forget that phrase commonly used in informatics: "It really depends...". It depends on your team, it depends on your timeline, it also depends on the devices you will be running the apps.

Objectives

My goals in this article are:

1. Set up a project using Ionic 4 and Angular;
2. Integrate Google Maps into the project;
3. Exercise some Maps features like centering, maps inputs and outputs;

1. Project Setup

The basic dependencies to start your project are: Node.js and Angular. If you do not have Node.js, go here. If you do not have Angular installed, go here. After installing both, you need to install Ionic. Just type:
npm install -g @ionic/cli
or go here for further details.
Finally, let's create our Ionic 4 project. Type:
ionic start
and next select Angular as framework.

Next, give a name to your project and as starter template choose sidemenu as seen bellow:

Next, if a question: "Integrate your new app with Capacitor to target native iOS and Android? (y/N)" is prompted, Choose (y) and wait until the template is completely generated.
There is only one more dependency to be added and we are ready to go. Go to your project's folder and install this dependency by typing:
npm install @angular/google-maps
Next type: code . To open the project on VSCode, and, once inside it, type on terminal ionic serve to check if our template is up and running. If everything went ok, you'll see at http://localhost:8100 this image which emulates a mobile device on browser after pressing F12 key:

2. Google Maps Integration

Google Maps is just perfect! However, in order to use it integrated to an application we have to pay for it. There's no free lunch right? Google has detailed instructions about billing and how to use Maps API here. After the payment process (do not worry you don't have to pay anything in advance) you'll receive an API KEY, which allows us to consume the Map services provided and billed by Google.

2.1 The App

Let's consider the following scenario: We'll adapt our generated template to a tourism App that presents points of interest to tourists from Cruise Lines. Our App will show points of interest near where the ship is anchored. Those points of interest will be divided in categories like (Restaurant, Must-See, Restroom, Tourist Info.).

2.2 Adaptations to Generated Sidemenu project

We will use Google Maps Component to ease the integration. First, go to index.html and

add the following script line:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
Keep in mind that you will have to use that API KEY generated after Google's billing process is completed instead of the variable "YOUR_API_KEY".

Next, we need do adapt the template to the tourism context. Notice that the generated template looks like a mail box, so let's change its context. Replace "Inbox" with "Welcome", "[e-mail]" with "[e-mail]", remove completely the Labels and adjust the itens and icons to present: All, Restaurant, Must-See, Restroom, Tourist Info.
As a result, the App now looks like below:

Go to Folder component, and on folder.module.ts file add GoogleMapsModule to imports.

Still, on Folder Component go to its template and inside the div with id=container replace the code with the following:

    <google-map
    height="500px"
    width="500px"
    >
    </google-map>

After that, theoretically, Google Maps should appear like this on the app:

3. Google Maps Features

You can see on previous pictures that when google maps doesn't know where to center, it goes "home". That's why the project is centered on GooglePlex, California at first. In order to change centering to a certain place, you need to discover this place's latitude and longitude (just click on the map and the coordinates will appear as shown bellow):

Create on folder.page.ts a variable center and set longitude and latitude attributes like this:
center = new google.maps.LatLng(-8.063242, -34.871048);
and update the template:

    <google-map
    height="700px"
    width="500px"
    [center]="center"
    >
    </google-map>

Now we can see that the map is centered according to the coordinates defined by center variable.

3.1 Points of Interest

Now, let's define some points of interest. In order to do it we can use this tool to generate a list of points interest and also add meaningful data associated to it.
For instance, if you click somewhere on the map, you can then add properties like a title and a category, and a json containing your definitions is generated on the right side.

Next, take the json points and create a file called points.json and import it on your file.
A possible points.json file is shown next:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "title": "Marco Zero",
        "cat": "mustsee"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.871112406253815,
          -8.063165383068121
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "title": "Malakoff Tower",
        "cat": "mustsee"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.87082004547119,
          -8.060759318240265
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "title": "Cais do Sertão Museum",
        "cat": "mustsee"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.87032651901245,
          -8.061216099860022
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "title": "Kahal-Zur-Israel Sinagoge",
        "cat": "mustsee"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.87139403820038,
          -8.06174192922556
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.871858060359955,
          -8.061085970265072
        ]
      }
    }
  ]
}

In addition, to use the json file, go to tsconfig.json file and on compilerOptions add:

 "resolveJsonModule": true, "esModuleInterop": true

By doing this you'll be able to import the json file like this:
import points from './points.json'
Finally, we have to show markers for the points we have defined. Markers are defined using the following component:

    <map-marker
    *ngFor="let marker of markers"
    [position]="marker.position"
    [label]="marker.label"
    [title]="marker.title"
    [options]="marker.options"
  >
  </map-marker>

We have to filter each point of interest selected in order to show just some, or all the points. For instance, if we click on "All" or when opening the app at first time, the following points are shown:

However, if "Must See" is clicked, only those points are presented:

All the code is here I hope this article help someone!

Fonts:
https://timdeschryver.dev/blog/google-maps-as-an-angular-component