Google Maps And Local Storage In Angular 2

Jinal Shah
7y
30.5k
0
7
100
Article

In this tutorial, I am going to introduce how easy it is to integrate Google Maps in Angular. I am going to show you how you can plot markers on a map, add a new marker, and store it to the local storage.

So are you exited???

Yes, let’s start with the tutorial. First, I will show how to setup the configuration for Google Maps.

First of all, visit this URL to integrate Google Maps in Angular.

Then, click on "Getting Started" button and scroll down to setting up angular2-google-maps and write dependency to package.json

Npm install angular2-google-maps - -save

Then, run npm install from command prompt. You can also get your Google Mapa API key as shown in the below.

Then, after creating a new project or choosing existing project, press on enable API to get your Maps API key.

Okay. Now, we are all set to integrate Google Maps in our project. I am just copying the key i.e. just generated and paste it to app.module.ts file as shown below.

Now, I am plotting my hometown Ahmedabad on map. To do so, I am first statically creating two variables on app.component.ts naming them as "lat" and "lng" and then, I will bind them to html, as shown in below files.

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
lat: number = 23.022505;
lng: number = 72.571362;
}

app.component.html

<div class="page-header">
<h1>Google Map In Angular </h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="map">
<sebm-google-map [latitude]="lat" [longitude]="lng">
<sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>
</div>
</div>
</div>
</div>

Isn’t it easy friends??? But again, it’s just a static one. Now, in next step, I will create an array of lat and lng and plot all the elements of array to map. So, let’s just do it.!!

To do it, I am first creating an interface named as marker to provide type that contains three variables- name, lat, and lng.

export interface marker{
name?:string;
lat:number;
lng:number;
}

Now, to keep my logic centralized, I am creating one service and naming it as markerdata.service.ts and inside the service, I am creating the array of markers and methods to return the array as shown below and as you know services must be provided in order to use them in projects. (i.e. service must be declared in providers array inside app.module.ts)

Markerdata.service.ts

import { Injectable } from '@angular/core';
import { marker } from './marker';
@Injectable()
export class MarkerdataService {
markers: marker[] = [
{
name: 'Ahmedabad',
lat: 23.022505,
lng: 72.571362
},
{
name: 'Baroda',
lat: 22.307159,
lng: 73.181219
},
{
name: 'Surat',
lat: 21.170240,
lng: 72.831061
},
{
name: 'Rajkot',
lat: 22.303894,
lng: 70.802160
},
];
constructor() { }
getAllMarkers() {
if (localStorage.getItem('markers') === null || localStorage.getItem('markers') === undefined) {
localStorage.setItem('markers', JSON.stringify(this.markers));
return this.markers;
}
else {
var markers = JSON.parse(localStorage.getItem('markers'));
return markers;
}
}
addMarker(newmarker: marker) {
var markers = JSON.parse(localStorage.getItem('markers'));
markers.push(newmarker);
localStorage.setItem('markers', JSON.stringify(markers));
}
removeMarker(mark: marker) {
var markers = JSON.parse(localStorage.getItem('markers'));
markers.splice(markers.indexOf(mark),1);
localStorage.setItem('markers', JSON.stringify(markers));
}
}

Here, in the above code, I have created methods for addMarker, removeMarker, and getAllMarker. And, I am also using local storage to preserve the values.

In getAllMarker method, I am first checking if the local storage has a value for key “markers;” if yes then load values from that key and if no then load the values from array and set the local storage.

In addMarker method, I am first fetching all the markers in markers and then adding newmarker to the markers and again setting the local storage with markers. Same for removeMarker, but in removeMarker I am splicing the marker from the array instead of pushing..

So, all done to fetch the markers!!

app.component.ts

import { Component } from '@angular/core';
import { marker } from './marker';
import { MarkerdataService } from './markerdata.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
lat: number = 23.022505;
lng: number = 72.571362;
allMarkers: marker[];
constructor(private _data: MarkerdataService) {
this.allMarkers = this._data.getAllMarkers();
}
onClick(m: any) {
console.log(m);
}
onMapClicked($event) {
var newMarker:marker={
name:'No Name',
lat:$event.coords.lat,
lng:$event.coords.lng
}
console.log(newMarker);
this.allMarkers.push(newMarker);
this._data.addMarker(newMarker);
}
onDelete(m:marker)
{
this.allMarkers.splice(this.allMarkers.indexOf(m),1);
this._data.removeMarker(m);
}
}

app.component.html

<div class="page-header">
<h1>Google Map In Angular </h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="map">
<sebm-google-map (mapClick)="onMapClicked($event)" [latitude]="lat" [longitude]="lng">
<sebm-google-map-marker
*ngFor="let m of allMarkers"
(markerClick)="onClick(m)"
[latitude]="m.lat"
[longitude]="m.lng"
>
<sebm-google-map-info-window>
<strong>{{m.name}}</strong>
<br>
<a class="delete" (click)="onDelete(m)">Delete</a>
</sebm-google-map-info-window>
</sebm-google-map-marker>
</sebm-google-map>
</div>
</div>
</div>
</div>

Now let me first explain the html portion of above code

<sebm-google-map> is to display the map.

<sebm-google-map-marker> is to plot the markers so I looped through my allMarkers array inside this tag.

<sebm-google-map-info-window> is to display basic information of particular marker.

And there is many more available in documents which is available here.

Here, in the above code, I have created the following events

(mapClick)="onMapClicked($event)"
This event is for adding a new marker (i.e. if I will clicked on any empty places on map it will simple plot marker there with name = No Name.)