Ionic 3 – Multiple markers on maps with firestore (Part – 2)

Hi Friends,

Hope you are all well. This is the sequel to my previous post – here.

Let’s just jump right in.

A screencast of this post

The code for this post is available – here.

I assume you have read my previous post. Let’s start from where we left off.

First go ahead and install firebase and angularfire2 as shown below.

Now open up app.module.ts and add imports and the firebase config. Once this is done let’s create a provider where we would write some code to save a marker.

Create a new provider using the command.

Open up the newly created provider file and add the below code.

The saveMarker method would save the marker onto the markers collection, whereas the getAllMarkers() would return all the markers (as an observable).

Now open up home.ts file and modify it as shown below.

That’s it.. Now simply try adding a marker. It would get added onto the map and also would get stored on firestore. Cool right..?

Let’s move on to creating markers of different colors. Now the easiest way to do this is to use markers from this library.

Open up home.ts file again and change it as shown below.

Now watch the marker color; it would look like this.

Screenshot_2018-04-30-16-19-55

You could obviously save details along with each marker and modify the click event to retrieve and show those details accordingly. Note that since we are using a forEach() and iterating through the list of returned markers, each and every marker appearing is an independent instance.

Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading guys. Peace.. :)

Plug – My course on building desktop apps with angular, electron and firestore from scratch is now out on udemy. Buy now.

 

Liked it? Take a second to support admin on Patreon!