I recently have worked with a project that builds a store locator plugin for a website. We already had a sample store locator project, but it was written years ago in JavaScript — you know what I mean, ton of codes which may or may not relevant to the project itself and also extreme hard to understand.

So, I decided to improve this project by taking advantage of Angular 2+. If you want to have a glimse of how the final project look like, you can visit the repository from my github: https://github.com/dalenguyen/angular-store-locator.

Demo: http://angular-store-locator.surge.sh/

Now I will show you know to build this from scratch.

Step 1: Create a branch new Angular Project

First, you need to have Node installed in your machine, then install Angular CLI globally

npm install -g @angular/cli

After that, you can create a new Angular project

ng new angular-store-locator

Now, you can start the project by running and check your browser: http://localhost:4200

cd angular-store-locator

ng serve --open

Step 2: Implement Angular Google Maps (AGM)

npm install @agm/core --save

Add AgmCoreModule to your app.module.ts

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

imports: [

...

AgmCoreModule.forRoot({

apiKey: 'YOUR_KEY',

libraries: ['places']

})

]

Setup the CSS file . This styling is required. Without it you cannot see the map.

// src/app/app.component.css agm-map {

height: 300px;

}

Edit your HTML file

// src/app/app.component.html <h1>{{ title }}</h1>



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

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

</agm-map>

Edit your component

// src/app/app.component.ts import { Component } from '@angular/core';



@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title: string = 'My first AGM project';

lat: number = 43.678418;

lng: number = -79.809007;

}

After finishing this step, you are able to see the map on your browser. I will update the next steps in the next posts — too tired now ;)