[FIXED] simplest way to get current location in Angular 2 Google Maps (AGM Core)


This question may have a duplicate or the answer that I want has already been answered in some other questions but I’ll still ask anyways.. This is a very basic question but I also want the easiest(simplest) way of how to achieve this

What I want to do is get the current Location of the device in which my app was executed.. I’ve seen other answers using geolocation but I can’t quite understand how to implement it to AGM because I’m quite new to ionic and angular, and I was wondering if there may be a more simple way to achieve this…

Your answers will be highly appreciated

Here’s my code:


    <ion-buttons end>
      <button ion-button (click)="onClose()">Close</button>


<ion-content padding>
   [disableDoubleClickZoom] = "true"
   [streetViewControl] = "false"

     <agm-info-window>Lat: {{clickedLat}} <br> Lng: {{clickedLng}}</agm-info-window>



page-viewmapings {
        height: 100%;


import { Component } from '@angular/core';
import { IonicPage, NavController, ViewController } from 'ionic-angular';

  selector: 'page-viewmapings',
  templateUrl: 'viewmapings.html',
export class ViewmapingsPage {

  lat: number = 51.678418;
  lng: number = 7.809007;
  clickedLat: number;
  clickedLng: number;
  selected =  false;

  constructor(public navCtrl: NavController, public viewCtrl: ViewController) {

  ionViewDidLoad() {
    console.log('ionViewDidLoad ViewmapingsPage');

    this.clickedLat = event.coords.lat;
    this.clickedLng = event.coords.lng;
    this.selected = true;




I’ve done something similar in a project. My advice is to create a service that will be in charge of that:


import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';

export class GeoLocationService {

  coordinates: any;

  constructor() { }

  public getPosition(): Observable<Position> {
    return Observable.create(
      (observer) => {
      navigator.geolocation.watchPosition((pos: Position) => {
      () => {
          console.log('Position is not available');
        enableHighAccuracy: true

Then, you can easily use it anywhere in your app:

ngOnInit() {
        (pos: Position) => {
            this.coordinates = {
              latitude:  +(pos.coords.latitude),
              longitude: +(pos.coords.longitude)

And use it with agm:


You can skip creating the service, but it’s really useful and gives you and observable, so your location updates it changes.

Answered By – zolastro

Answer Checked By – Mary Flores (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published