find and solve || findandsolve.com
Please wait.....

Welcome back.






Before Read Terms of use

Integrate Google Maps Using Angular In .NET Core



Step: 1

Create Asp.Net Core Project for GoogleMapInAngular example

First Open Visual Studio 2017 or grater then 2017 and select File > New > Project.After selecting the project, a new project dialog will open in your computer given below image.Select .NET Core  Web  Application inside Visual C# menu from the left panel given.Then,select ASP.NET Core Web Application from available project types list and then Put the name of the project as "GoogleMapInAngular " and press OK.
 





Setp: 2


 After clicking on OK button,a new dialog will open asking you to select the project template.There are two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.2” from these dropdowns and select “Angular” template and press OK Button.
 

How to add angular-editor in asp.net core application step by step

Setp: 3


After that  our project will be created. You can see the folder structure in Solution Explorer as shown in the given below image.




Step: 4


 Right click your project ClientApp > Open Folder in File Explorer and Click this menu.After that you can see your project path. After that Click on "File" menu from the right top menu , then select “Open Windows PowerShell” from Menu List under File Menu and Press OK.

Type "npm install @agm/core  Windows PawerShell and Enter live given below 

@agm/core is google map dependencies.Yous should install


Step: 5


Open your app.module.ts and past this code as given below

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { AgmCoreModule } from '@agm/core';
@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    AgmCoreModule.forRoot({
      apiKey: '********************************', //you should past  your google map api key from google app.
      libraries: ['places']
    }),
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
     
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Step: 6

Edit your HomeComponent.ts under home folder and past this code as given below

import { Component, NgZone, ElementRef } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MapsAPILoader } from '@agm/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  title: string = 'AGM project';
  latitude: string;
  longitude: string;
  zoom: number;
  address: string;
  lat = new FormControl();
  lon = new FormControl();
  private geoCoder;
  constructor(
    private mapsAPILoader: MapsAPILoader,
    
  ) {
  
  }
  public searchElementRef: ElementRef;
  ngOnInit() {
    {
      //load Places Autocomplete
      this.mapsAPILoader.load().then(() => {
        this.setCurrentLocation();
        this.geoCoder = new google.maps.Geocoder;
      });
    }
  }
  // Get Current Location Coordinates
  private setCurrentLocation() {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
        this.zoom = 8;
        this.getAddress(this.latitude, this.longitude);
      });
    }
  }
  markerDragEnd($event: any) {
    console.log($event);
    this.latitude = $event.coords.lat;
    this.longitude = $event.coords.lng;
    this.getAddress(this.latitude, this.longitude);
  }
  getAddress(latitude, longitude) {
    //alert(latitude +"-"+ longitude);
    this.geoCoder.geocode({ 'location': { lat: latitude, lng: longitude } }, (results, status) => {
      
      if (status === 'OK') {
        if (results[0]) {
          this.zoom = 12;
          this.address = results[0].formatted_address;
        } else {
          window.alert('No results found');
        }
      } else {
        // window.alert('Geocoder failed due to: ' + status);
      }
    });
  }
}

Step: 7


Edit your home.component.html under home folder and past this code as given below

<style>
  agm-map {
    height: 300px;
  }
</style>
<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="18">
  <agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true"
              (dragEnd)="markerDragEnd($event)"></agm-marker>
</agm-map>

Sundar  Neupane

Sundar Neupane

I like working on projects with a team that cares about creating beautiful and usable interfaces.

Comments



Report Response