Introduction to Google Map & Local Storage in Angular

Hello Readers,

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

So are you excited???

Yes so let’s start with the tutorial. First I will show how to setup the configuration for google map.

First visit this url to integrate google map in angular( https://angular-maps.com/  ).

Screenshot (144).png

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 map api key as shown below from url

Screenshot (145)_LI.jpgScreenshot (146).png

Then after creating new project or choosing existing project press on enable api to get your map api key.

Screenshot (147)_LI.jpg

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

Screenshot (148)_LI.jpg

Now I am plotting my home town ahmedabad on map, to do so I am first statically creating two variables on app.component.ts and named it as lat and lng and then 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>

 

app.component.css

.sebm-google-map-container {
  height: 300px;
}

Screenshot (149).png

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 elements of array to map. So let’s just do it.!!

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

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

Markerdata.service.ts

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

In getAllMarker method I am first checking that does the local storage has 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 pushing..

So all done to fetch the markers!!

app.component.ts

app.component.html

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 (https://angular-maps.com/ )

Here in above code I had created following events

  1. (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.)

  1. (markerClick)=”onClick(m)” :-

This event is for display info about the clicked marker.(i.e. it will display the name)

  1. (click)=”onDelete(m)” :-

This event is to delete the particular marker.

Output:screenshot-150screenshot-152

Summary:

SourceCode

So in this tutorial , you learned how to integrate google map with angular and also how to use local storage for storing the markers.

Thanks for reading and I hope it will be helpful to you.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s