Home Ionic Ionic 4 — Google Map — Part 2— Geo Location

Ionic 4 — Google Map — Part 2— Geo Location

I am going to show how to implement Geo Location into our Ionic 4 application. We are going to need to generate a key from Google in order to use the Google Maps API.

Create new project using the following CLI command.

ionic start GoogleMap blank

Next, add the following script on tour index.html file head section

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
//Replace your API key here.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
  <base href="/" />
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
  <!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>

finally, your index.html file like this.

Next goto the homepage directory. open the home.page.scss file. and add the following scss code.

.map {
height: 100%;
}

Create a new page using the following command

ionic g p geolocation

Your component template file like this

<ion-header>
<ion-toolbar>
<ion-title>GeoLocation</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<div #mapElement class="map"></div>
</ion-content>

Your component class file like this

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';
declare var google;
@Component({
selector: 'app-geolocation',
templateUrl: './geolocation.page.html',
styleUrls: ['./geolocation.page.scss'],
})
export class GeolocationPage implements OnInit, AfterViewInit {
latitude: any;
longitude: any;
@ViewChild('mapElement') mapNativeElement: ElementRef;
constructor(private geolocation: Geolocation) { }

ngOnInit() {
}

ngAfterViewInit(): void {
this.geolocation.getCurrentPosition().then((resp) => {
this.latitude = resp.coords.latitude;
this.longitude = resp.coords.longitude;
const map = new google.maps.Map(this.mapNativeElement.nativeElement, {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
const infoWindow = new google.maps.InfoWindow;
const pos = {
lat: this.latitude,
lng: this.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}).catch((error) => {
console.log('Error getting location', error);
});
}

}

Your component module file like this

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { IonicModule } from '@ionic/angular';

import { GeolocationPage } from './geolocation.page';

const routes: Routes = [
{
path: '',
component: GeolocationPage
}
];

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [GeolocationPage],
providers: [Geolocation]
})
export class GeolocationPageModule {}

Thank you.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Auto Detect Responsive Screen Sizes in Angular

Most of the time, we use CSS media queries to handle responsive, screen size changes to layout our content differently. However, there...

Angular 9 CRUD | Part 8 |Delete an Existing Product

In this article, I am going to show you how to delete a product. Create a method...

Angular 9 CRUD | Part 7 | Update an Existing Product

In this article, we will update the existing product details. Here we are using reactive forms and HttpClient for updating the...

Angular 9 CRUD | Part 6 | Create New Product

In this article, we will create a new product. Here we are using reactive forms for creating a new product. first...

Recent Comments

Sathish Kumar Ramalingam on Angular 2 Admin LTE Theme Integration