How to find Location from Browser with Angular

Recently we had a project, where we need to find a location from Browser and display nearby data from the related location. Now, the challenge we had is how to workout with Angular JS. Whenever you check Google API for Maps (https://cloud.google.com/maps-platform/maps/) it provide you basic Javascript or JQuery based solution. Not Angular based (This applied to when we made this site). After multiple research we found Angular Maps. It has many items which we need. So in this blog, i will provide you steps where we have setup How to find location from Browser with Angular JS and Angular Map.

Angular Map Link: https://angular-maps.com/

Steps 1 – Create your Angular 6 project and go to project directory and run the below command.

npm install @agm/core

Steps 2 – Import the AgmCoreModule in the app.module.ts

import { AgmCoreModule } from '@agm/core';

After that, add AGM Core Root for Google API key and it looks like –

Note – You must need to provide a Google Maps API key to render Map. Get an API Key From Google…

Steps 3 – Add following code to app.component.ts file

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  lat: number = 21.149102499999998; // Set Any Latitude
  lng: number = 72.77611639999999; // Set Any Longitude
}

Steps 4 – Add following code to your Google HTML template which in our case is , app.component.html

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

Steps 5 – To setup CSS we have added following code at app.component.css.

agm-map {
    height: 400px;
    width: 400px;
}

Note – Setup your Google template CSS class for managing the height and width. You must add the CSS class, without this class not display the Google Maps.You can set your own width and height

Steps 6 – Now, we are done with basic setup. What we need to achieve is how to fetch current position from browser. For that here is solution we need to apply.

Add one function in ngOnInit() like this at app.component.ts file

this.setCurrentPosition();

public setCurrentPosition()
{
        if ("geolocation" in navigator) { 
        navigator.geolocation.getCurrentPosition((position) => { 
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude; 
 
        this.getLocationAddress() // Using latitude and longitude getting address of place
       
    
    }, failure => {  
            switch (failure.code) {
            case 3:
                  // ...deal with timeout
                  break;
         case 2:
 // ...device can't get data
          break;
case 1:
          // ...user said no (PERMISSION_DENIED)
 }
    }); 
    } 
     
}

public getLocationAddress()
{
    let lat = this.latitude;
    let lng = this.longitude; 
    let latlng = new google.maps.LatLng(lat, lng);
    let geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'latLng': latlng },(results, status)=> {     
      if (status == google.maps.GeocoderStatus.OK) 
      { 
            console.log(result); //In Result you will different types of address. Choose which one you want to display.
      }
    });
}

 

 

Steps 7 – Now, we are done. Build your project and run in your browser. When you run your project / page, it will look something like:

 

I would like to thank Niyati Parekh for this project work and research she did.