In this episode, I will show you how to query Firebase data based on its proximity to a set of GPS coordinates. We use Angular Google Maps (AGM) to handle the map building process, then throw in GeoFire to make realtime location-driven queries. Check out the full tutorial code here: https://angularfirebase.com/lessons/geofire-location-queries-with-google-maps/

Angular Google Maps: https://angular-maps.com/
Firebase GeoFire: https://github.com/firebase/geofire
2024-02-04T08:11:15.936Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
9d50f75b-8bbc-4058-92fb-e0ee4e5f7e66
844723316eb85aef50a3e23fa60aebbf7a2bf59420ef86af91b846e9dd1884ce
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
When building a location driven app, it's critical to be able to query data based on the current user's location.
In this episode, we're going to use Angular Google Maps along with Firebase GeoFire to accomplish this task.
The app will first detect the current user's location and then query Firebase for any items within a certain radius of that location.
Then we'll display those items on the map along with their distance from the current user.
To help us along the way, we're going to use the Angular Google Maps package, which includes several prebuilt components and directives for common Google Maps elements.
You can install it with npm install agm/coreflagsave.
From there, you need to go to the Google Cloud Platform console and enable the Google Maps API.
Once enabled, you can generate an API key, and then we'll use that API key in the Angular environment.
Here we already have Firebase configured via AngularFire 2, and then we'll also add our Google Maps API key here.
Then we can go over to our app module, and we'll import the environment as well as the AngularFire module and Angular Google Maps.
Then we can pass AGM or Google Maps API queue when we import it in the module.
From here, we'll go ahead and create a new component to handle the map called Google Map.
Then we need to give the map a CSS style.
We want it to be full screen, so we'll just do a 100 width and height.
In the HTML, we'll wrap the map in a div, so it only displays if the latitude and longitude is defined.
Then we can use the AGM map selector and pass it the latitude and longitude as input arguments.
This will define the center point of the map.
Then we can nest AGM markers inside the map and display them at whichever coordinates we want.
And if we want that marker to have a pop up window, then we can add the AGM info window, and we can transclude any HTML we want in here.
So now we just need to get the current user's location.
So we can do this in the component by defining a lat and longitude variable.
Then during n g on init, we tap into the global navigator object and we call get current position.
And this will return the user's current position, latitude, and longitude on their browser or device.
Now if you go to the app and check it out, you should see the map centered on your current location along with a marker exactly where you presently are.
Now that we have a basic map to work with, let's use GeoFire to query Firebase based on a GPS location.
You can install it by running npm install GeoFire flag save.
When you update the Firebase database with GeoFire, it saves a unique string along with the GPS coordinates for a location.
This makes it possible to run queries in real time based on a given location's distance from these coordinates.
Now let's create a service to interact with GeoFire.
First, we'll import the AngularFire database and we'll also import the GeoFire library.
And we're also gonna use an RX JS behavior subject to save the ultimate results we get back from GeoFire.
So I'm calling the results hits and for now they're just gonna be an empty array.
To work with GeoFire, you need to send it a database reference of the location that you're working with.
This can be done with AngularFire too by calling DB list and then passing that reference to a new GeoFire instance.
1st, we'll create a function to create new data using GeoFire.
It takes the Firebase push key as an argument along with the lat and longitude in an array.
And then we can call geofire.set and pass it the key and the coordinates.
This will update the Firebase database in the proper format.
The next thing we'll do is query data based on their presence within a radius in kilometers this from a given set of coordinates.
We do this by calling GeoFire query, pass it the center, which is the GPS coordinates, and the radius, that's how far out we want the query to go.
Then we can listen to the key entered event, which occurs when Firebase has returned a relevant data point.
It's going to have the key, the location in GPS coordinates, as well as the distance from the center of that circle.
We'll go ahead and save this as our own data object called hit, then we can get the current value from the behavior subject, append the latest hit to it, and then update the value of the behavior subject by calling next on it.
Now let's go back to the component and inject the geo service into it.
Then we'll display the hits from GeoFire as markers in the map.
So since we have the hits as a behavior subject, we can just subscribe to them during n g on init or you could also use the async pipe in the template to subscribe to them as well.
Then we just need to tell GeoFire to make the query by calling geo.get locations.
And in this example, we'll do it within a 500 kilometer radius.
In the HTML, we can add another AGM marker inside of our AGM map, and this time we'll loop over it with n g 4.
And we can pass it the latitude and longitude for each marker as well as a custom icon.
Then inside the pop up window, we can all users exactly how far away they are in kilometers from any of these markers.
Now if we go to the app, we can see when we navigate up to the hers and click on them.
It'll tell us exactly how many kilometers we are away from that point.
That's it for Angular Google Maps and GeoFire.
If if this video helped you, please like and subscribe.
And if you wanna support the channel, consider becoming a pro member at angularfirebase.com where you'll get a free copy of my book as well as 1 on 1 project a consulting.
Thanks for watching, and I'll see you soon.

Speaker 0: When building a location driven app, it's critical to be able to query data based on the current user's location. In this episode, we're going to use Angular Google Maps along with Firebase GeoFire to accomplish this task. The app will first detect the current user's location and then query Firebase for any items within a certain radius of that location. Then we'll display those items on the map along with their distance from the current user. To help us along the way, we're going to use the Angular Google Maps package, which includes several prebuilt components and directives for common Google Maps elements.

You can install it with npm install agm/coreflagsave. From there, you need to go to the Google Cloud Platform console and enable the Google Maps API. Once enabled, you can generate an API key, and then we'll use that API key in the Angular environment. Here we already have Firebase configured via AngularFire 2, and then we'll also add our Google Maps API key here. Then we can go over to our app module, and we'll import the environment as well as the AngularFire module and Angular Google Maps.

Then we can pass AGM or Google Maps API queue when we import it in the module. From here, we'll go ahead and create a new component to handle the map called Google Map. Then we need to give the map a CSS style. We want it to be full screen, so we'll just do a 100 width and height. In the HTML, we'll wrap the map in a div, so it only displays if the latitude and longitude is defined.

Then we can use the AGM map selector and pass it the latitude and longitude as input arguments. This will define the center point of the map. Then we can nest AGM markers inside the map and display them at whichever coordinates we want. And if we want that marker to have a pop up window, then we can add the AGM info window, and we can transclude any HTML we want in here. So now we just need to get the current user's location.

So we can do this in the component by defining a lat and longitude variable. Then during n g on init, we tap into the global navigator object and we call get current position. And this will return the user's current position, latitude, and longitude on their browser or device. Now if you go to the app and check it out, you should see the map centered on your current location along with a marker exactly where you presently are. Now that we have a basic map to work with, let's use GeoFire to query Firebase based on a GPS location.

You can install it by running npm install GeoFire flag save. When you update the Firebase database with GeoFire, it saves a unique string along with the GPS coordinates for a location. This makes it possible to run queries in real time based on a given location's distance from these coordinates. Now let's create a service to interact with GeoFire. First, we'll import the AngularFire database and we'll also import the GeoFire library.

And we're also gonna use an RX JS behavior subject to save the ultimate results we get back from GeoFire. So I'm calling the results hits and for now they're just gonna be an empty array. To work with GeoFire, you need to send it a database reference of the location that you're working with. This can be done with AngularFire too by calling DB list and then passing that reference to a new GeoFire instance. 1st, we'll create a function to create new data using GeoFire.

It takes the Firebase push key as an argument along with the lat and longitude in an array. And then we can call geofire.set and pass it the key and the coordinates. This will update the Firebase database in the proper format. The next thing we'll do is query data based on their presence within a radius in kilometers this from a given set of coordinates. We do this by calling GeoFire query, pass it the center, which is the GPS coordinates, and the radius, that's how far out we want the query to go.

Then we can listen to the key entered event, which occurs when Firebase has returned a relevant data point. It's going to have the key, the location in GPS coordinates, as well as the distance from the center of that circle. We'll go ahead and save this as our own data object called hit, then we can get the current value from the behavior subject, append the latest hit to it, and then update the value of the behavior subject by calling next on it. Now let's go back to the component and inject the geo service into it. Then we'll display the hits from GeoFire as markers in the map.

So since we have the hits as a behavior subject, we can just subscribe to them during n g on init or you could also use the async pipe in the template to subscribe to them as well. Then we just need to tell GeoFire to make the query by calling geo.get locations. And in this example, we'll do it within a 500 kilometer radius. In the HTML, we can add another AGM marker inside of our AGM map, and this time we'll loop over it with n g 4. And we can pass it the latitude and longitude for each marker as well as a custom icon.

Then inside the pop up window, we can all users exactly how far away they are in kilometers from any of these markers. Now if we go to the app, we can see when we navigate up to the hers and click on them. It'll tell us exactly how many kilometers we are away from that point. That's it for Angular Google Maps and GeoFire. If if this video helped you, please like and subscribe.

And if you wanna support the channel, consider becoming a pro member at angularfirebase.com where you'll get a free copy of my book as well as 1 on 1 project a consulting. Thanks for watching, and I'll see you soon.
When building a location driven app, it's critical to be able to query data based on the current user's location. In this episode, we're going to use Angular Google Maps along with Firebase GeoFire to accomplish this task. The app will first detect the current user's location and then query Firebase for any items within a certain radius of that location. Then we'll display those items on the map along with their distance from the current user. To help us along the way, we're going to use the Angular Google Maps package, which includes several prebuilt components and directives for common Google Maps elements.
google
You can install it with npm install agm/coreflagsave. From there, you need to go to the Google Cloud Platform console and enable the Google Maps API. Once enabled, you can generate an API key, and then we'll use that API key in the Angular environment. Here we already have Firebase configured via AngularFire 2, and then we'll also add our Google Maps API key here. Then we can go over to our app module, and we'll import the environment as well as the AngularFire module and Angular Google Maps. Then we can pass AGM or Google Maps API queue when we import it in the module.
From here, we'll go ahead and create a new component to handle the map called Google Map. Then we need to give the map a CSS style. We want it to be full screen, so we'll just do a 100 width and height. In the HTML, we'll wrap the map in a div, so it only displays if the latitude and longitude is defined.
geometry
Then we can use the AGM map selector and pass it the latitude and longitude as input arguments. This will define the center point of the map. Then we can nest AGM markers inside the map and display them at whichever coordinates we want. And if we want that marker to have a pop up window, then we can add the AGM info window, and we can transclude any HTML we want in here. So now we just need to get the current user's location. So we can do this in the component by defining a lat and longitude variable.
Then during n g on init, we tap into the global navigator object and we call get current position. And this will return the user's current position, latitude, and longitude on their browser or device. Now if you go to the app and check it out, you should see the map centered on your current location along with a marker exactly where you presently are. Now that we have a basic map to work with, let's use GeoFire to query Firebase based on a GPS location.
geography
You can install it by running npm install GeoFire flag save. When you update the Firebase database with GeoFire, it saves a unique string along with the GPS coordinates for a location. This makes it possible to run queries in real time based on a given location's distance from these coordinates. Now let's create a service to interact with GeoFire. First, we'll import the AngularFire database and we'll also import the GeoFire library. And we're also gonna use an RX JS behavior subject to save the ultimate results we get back from GeoFire. So I'm calling the results hits and for now they're just gonna be an empty array. To work with GeoFire, you need to send it a database reference of the location that you're working with. This can be done with AngularFire too by calling DB list and then passing that reference to a new GeoFire instance. 1st, we'll create a function to create new data using GeoFire. It takes the Firebase push key as an argument along with the lat and longitude in an array. And then we can call geofire.set and pass it the key and the coordinates. This will update the Firebase database in the proper format. The next thing we'll do is query data based on their presence within a radius in kilometers this from a given set of coordinates. We do this by calling GeoFire query, pass it the center, which is the GPS coordinates, and the radius, that's how far out we want the query to go. Then we can listen to the key entered event, which occurs when Firebase has returned a relevant data point. It's going to have the key, the location in GPS coordinates, as well as the distance from the center of that circle.
We'll go ahead and save this as our own data object called hit, then we can get the current value from the behavior subject, append the latest hit to it, and then update the value of the behavior subject by calling next on it. Now let's go back to the component and inject the geo service into it.
data
Then we'll display the hits from GeoFire as markers in the map. So since we have the hits as a behavior subject, we can just subscribe to them during n g on init or you could also use the async pipe in the template to subscribe to them as well.
Then we just need to tell GeoFire to make the query by calling geo.get locations. And in this example, we'll do it within a 500 kilometer radius. In the HTML, we can add another AGM marker inside of our AGM map, and this time we'll loop over it with n g 4.
geography
And we can pass it the latitude and longitude for each marker as well as a custom icon. Then inside the pop up window, we can all users exactly how far away they are in kilometers from any of these markers. Now if we go to the app, we can see when we navigate up to the hers and click on them. It'll tell us exactly how many kilometers we are away from that point.
That's it for Angular Google Maps and GeoFire. If if this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angularfirebase.com where you'll get a free copy of my book as well as 1 on 1 project a consulting. Thanks for watching, and I'll see you soon.
youtube
seasons
When building a location driven app, it's critical to be able to query data based on the current user's location. In this episode, we're going to use Angular Google Maps along with Firebase GeoFire to accomplish this task. The app will first detect the current user's location and then query Firebase for any items within a certain radius of that location. Then we'll display those items on the map along with their distance from the current user. To help us along the way, we're going to use the Angular Google Maps package, which includes several prebuilt components and directives for common Google Maps elements. You can install it with npm install agm/coreflagsave. From there, you need to go to the Google Cloud Platform console and enable the Google Maps API. Once enabled, you can generate an API key, and then we'll use that API key in the Angular environment. Here we already have Firebase configured via AngularFire 2, and then we'll also add our Google Maps API key here. Then we can go over to our app module, and we'll import the environment as well as the AngularFire module and Angular Google Maps. Then we can pass AGM or Google Maps API queue when we import it in the module. From here, we'll go ahead and create a new component to handle the map called Google Map. Then we need to give the map a CSS style. We want it to be full screen, so we'll just do a 100 width and height. In the HTML, we'll wrap the map in a div, so it only displays if the latitude and longitude is defined. Then we can use the AGM map selector and pass it the latitude and longitude as input arguments. This will define the center point of the map. Then we can nest AGM markers inside the map and display them at whichever coordinates we want. And if we want that marker to have a pop up window, then we can add the AGM info window, and we can transclude any HTML we want in here. So now we just need to get the current user's location. So we can do this in the component by defining a lat and longitude variable. Then during n g on init, we tap into the global navigator object and we call get current position. And this will return the user's current position, latitude, and longitude on their browser or device. Now if you go to the app and check it out, you should see the map centered on your current location along with a marker exactly where you presently are. Now that we have a basic map to work with, let's use GeoFire to query Firebase based on a GPS location. You can install it by running npm install GeoFire flag save. When you update the Firebase database with GeoFire, it saves a unique string along with the GPS coordinates for a location. This makes it possible to run queries in real time based on a given location's distance from these coordinates. Now let's create a service to interact with GeoFire. First, we'll import the AngularFire database and we'll also import the GeoFire library. And we're also gonna use an RX JS behavior subject to save the ultimate results we get back from GeoFire. So I'm calling the results hits and for now they're just gonna be an empty array. To work with GeoFire, you need to send it a database reference of the location that you're working with. This can be done with AngularFire too by calling DB list and then passing that reference to a new GeoFire instance. 1st, we'll create a function to create new data using GeoFire. It takes the Firebase push key as an argument along with the lat and longitude in an array. And then we can call geofire.set and pass it the key and the coordinates. This will update the Firebase database in the proper format. The next thing we'll do is query data based on their presence within a radius in kilometers this from a given set of coordinates. We do this by calling GeoFire query, pass it the center, which is the GPS coordinates, and the radius, that's how far out we want the query to go. Then we can listen to the key entered event, which occurs when Firebase has returned a relevant data point. It's going to have the key, the location in GPS coordinates, as well as the distance from the center of that circle. We'll go ahead and save this as our own data object called hit, then we can get the current value from the behavior subject, append the latest hit to it, and then update the value of the behavior subject by calling next on it. Now let's go back to the component and inject the geo service into it. Then we'll display the hits from GeoFire as markers in the map. So since we have the hits as a behavior subject, we can just subscribe to them during n g on init or you could also use the async pipe in the template to subscribe to them as well. Then we just need to tell GeoFire to make the query by calling geo.get locations. And in this example, we'll do it within a 500 kilometer radius. In the HTML, we can add another AGM marker inside of our AGM map, and this time we'll loop over it with n g 4. And we can pass it the latitude and longitude for each marker as well as a custom icon. Then inside the pop up window, we can all users exactly how far away they are in kilometers from any of these markers. Now if we go to the app, we can see when we navigate up to the hers and click on them. It'll tell us exactly how many kilometers we are away from that point. That's it for Angular Google Maps and GeoFire. If if this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angularfirebase.com where you'll get a free copy of my book as well as 1 on 1 project a consulting. Thanks for watching, and I'll see you soon.
When
when
building
building
a
a
location
location
driven
driven
app,
app
it's
it's
critical
critical
to
to
be
be
able
able
to
to
query
query
data
data
based
based
on
on
the
the
current
current
user's
user's
location.
location
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
use
use
Angular
angular
Google
google
Maps
maps
along
along
with
with
Firebase
firebase
GeoFire
geofire
to
to
accomplish
accomplish
this
this
task.
task
The
the
app
app
will
will
first
first
detect
detect
the
the
current
current
user's
user's
location
location
and
and
then
then
query
query
Firebase
firebase
for
for
any
any
items
items
within
within
a
a
certain
certain
radius
radius
of
of
that
that
location.
location
Then
then
we'll
we'll
display
display
those
those
items
items
on
on
the
the
map
map
along
along
with
with
their
their
distance
distance
from
from
the
the
current
current
user.
user
To
to
help
help
us
us
along
along
the
the
way,
way
we're
we're
going
going
to
to
use
use
the
the
Angular
angular
Google
google
Maps
maps
package,
package
which
which
includes
includes
several
several
prebuilt
prebuilt
components
components
and
and
directives
directives
for
for
common
common
Google
google
Maps
maps
elements.
elements
You
you
can
can
install
install
it
it
with
with
npm
npm
install
install
agm/coreflagsave.
agm/coreflagsave
From
from
there,
there
you
you
need
need
to
to
go
go
to
to
the
the
Google
google
Cloud
cloud
Platform
platform
console
console
and
and
enable
enable
the
the
Google
google
Maps
maps
API.
api
Once
once
enabled,
enabled
you
you
can
can
generate
generate
an
an
API
api
key,
key
and
and
then
then
we'll
we'll
use
use
that
that
API
api
key
key
in
in
the
the
Angular
angular
environment.
environment
Here
here
we
we
already
already
have
have
Firebase
firebase
configured
configured
via
via
AngularFire
angularfire
2,
2
and
and
then
then
we'll
we'll
also
also
add
add
our
our
Google
google
Maps
maps
API
api
key
key
here.
here
Then
then
we
we
can
can
go
go
over
over
to
to
our
our
app
app
module,
module
and
and
we'll
we'll
import
import
the
the
environment
environment
as
as
well
well
as
as
the
the
AngularFire
angularfire
module
module
and
and
Angular
angular
Google
google
Maps.
maps
Then
then
we
we
can
can
pass
pass
AGM
agm
or
or
Google
google
Maps
maps
API
api
queue
queue
when
when
we
we
import
import
it
it
in
in
the
the
module.
module
From
from
here,
here
we'll
we'll
go
go
ahead
ahead
and
and
create
create
a
a
new
new
component
component
to
to
handle
handle
the
the
map
map
called
called
Google
google
Map.
map
Then
then
we
we
need
need
to
to
give
give
the
the
map
map
a
a
CSS
css
style.
style
We
we
want
want
it
it
to
to
be
be
full
full
screen,
screen
so
so
we'll
we'll
just
just
do
do
a
a
100
100
width
width
and
and
height.
height
In
in
the
the
HTML,
html
we'll
we'll
wrap
wrap
the
the
map
map
in
in
a
a
div,
div
so
so
it
it
only
only
displays
displays
if
if
the
the
latitude
latitude
and
and
longitude
longitude
is
is
defined.
defined
Then
then
we
we
can
can
use
use
the
the
AGM
agm
map
map
selector
selector
and
and
pass
pass
it
it
the
the
latitude
latitude
and
and
longitude
longitude
as
as
input
input
arguments.
arguments
This
this
will
will
define
define
the
the
center
center
point
point
of
of
the
the
map.
map
Then
then
we
we
can
can
nest
nest
AGM
agm
markers
markers
inside
inside
the
the
map
map
and
and
display
display
them
them
at
at
whichever
whichever
coordinates
coordinates
we
we
want.
want
And
and
if
if
we
we
want
want
that
that
marker
marker
to
to
have
have
a
a
pop
pop
up
up
window,
window
then
then
we
we
can
can
add
add
the
the
AGM
agm
info
info
window,
window
and
and
we
we
can
can
transclude
transclude
any
any
HTML
html
we
we
want
want
in
in
here.
here
So
so
now
now
we
we
just
just
need
need
to
to
get
get
the
the
current
current
user's
user's
location.
location
So
so
we
we
can
can
do
do
this
this
in
in
the
the
component
component
by
by
defining
defining
a
a
lat
lat
and
and
longitude
longitude
variable.
variable
Then
then
during
during
n
n
g
g
on
on
init,
init
we
we
tap
tap
into
into
the
the
global
global
navigator
navigator
object
object
and
and
we
we
call
call
get
get
current
current
position.
position
And
and
this
this
will
will
return
return
the
the
user's
user's
current
current
position,
position
latitude,
latitude
and
and
longitude
longitude
on
on
their
their
browser
browser
or
or
device.
device
Now
now
if
if
you
you
go
go
to
to
the
the
app
app
and
and
check
check
it
it
out,
out
you
you
should
should
see
see
the
the
map
map
centered
centered
on
on
your
your
current
current
location
location
along
along
with
with
a
a
marker
marker
exactly
exactly
where
where
you
you
presently
presently
are.
are
Now
now
that
that
we
we
have
have
a
a
basic
basic
map
map
to
to
work
work
with,
with
let's
let's
use
use
GeoFire
geofire
to
to
query
query
Firebase
firebase
based
based
on
on
a
a
GPS
gps
location.
location
You
you
can
can
install
install
it
it
by
by
running
running
npm
npm
install
install
GeoFire
geofire
flag
flag
save.
save
When
when
you
you
update
update
the
the
Firebase
firebase
database
database
with
with
GeoFire,
geofire
it
it
saves
saves
a
a
unique
unique
string
string
along
along
with
with
the
the
GPS
gps
coordinates
coordinates
for
for
a
a
location.
location
This
this
makes
makes
it
it
possible
possible
to
to
run
run
queries
queries
in
in
real
real
time
time
based
based
on
on
a
a
given
given
location's
location's
distance
distance
from
from
these
these
coordinates.
coordinates
Now
now
let's
let's
create
create
a
a
service
service
to
to
interact
interact
with
with
GeoFire.
geofire
First,
first
we'll
we'll
import
import
the
the
AngularFire
angularfire
database
database
and
and
we'll
we'll
also
also
import
import
the
the
GeoFire
geofire
library.
library
And
and
we're
we're
also
also
gonna
gonna
use
use
an
an
RX
rx
JS
js
behavior
behavior
subject
subject
to
to
save
save
the
the
ultimate
ultimate
results
results
we
we
get
get
back
back
from
from
GeoFire.
geofire
So
so
I'm
i'm
calling
calling
the
the
results
results
hits
hits
and
and
for
for
now
now
they're
they're
just
just
gonna
gonna
be
be
an
an
empty
empty
array.
array
To
to
work
work
with
with
GeoFire,
geofire
you
you
need
need
to
to
send
send
it
it
a
a
database
database
reference
reference
of
of
the
the
location
location
that
that
you're
you're
working
working
with.
with
This
this
can
can
be
be
done
done
with
with
AngularFire
angularfire
too
too
by
by
calling
calling
DB
db
list
list
and
and
then
then
passing
passing
that
that
reference
reference
to
to
a
a
new
new
GeoFire
geofire
instance.
instance
1st,
1st
we'll
we'll
create
create
a
a
function
function
to
to
create
create
new
new
data
data
using
using
GeoFire.
geofire
It
it
takes
takes
the
the
Firebase
firebase
push
push
key
key
as
as
an
an
argument
argument
along
along
with
with
the
the
lat
lat
and
and
longitude
longitude
in
in
an
an
array.
array
And
and
then
then
we
we
can
can
call
call
geofire.set
geofire.set
and
and
pass
pass
it
it
the
the
key
key
and
and
the
the
coordinates.
coordinates
This
this
will
will
update
update
the
the
Firebase
firebase
database
database
in
in
the
the
proper
proper
format.
format
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
query
query
data
data
based
based
on
on
their
their
presence
presence
within
within
a
a
radius
radius
in
in
kilometers
kilometers
this
this
from
from
a
a
given
given
set
set
of
of
coordinates.
coordinates
We
we
do
do
this
this
by
by
calling
calling
GeoFire
geofire
query,
query
pass
pass
it
it
the
the
center,
center
which
which
is
is
the
the
GPS
gps
coordinates,
coordinates
and
and
the
the
radius,
radius
that's
that's
how
how
far
far
out
out
we
we
want
want
the
the
query
query
to
to
go.
go
Then
then
we
we
can
can
listen
listen
to
to
the
the
key
key
entered
entered
event,
event
which
which
occurs
occurs
when
when
Firebase
firebase
has
has
returned
returned
a
a
relevant
relevant
data
data
point.
point
It's
it's
going
going
to
to
have
have
the
the
key,
key
the
the
location
location
in
in
GPS
gps
coordinates,
coordinates
as
as
well
well
as
as
the
the
distance
distance
from
from
the
the
center
center
of
of
that
that
circle.
circle
We'll
we'll
go
go
ahead
ahead
and
and
save
save
this
this
as
as
our
our
own
own
data
data
object
object
called
called
hit,
hit
then
then
we
we
can
can
get
get
the
the
current
current
value
value
from
from
the
the
behavior
behavior
subject,
subject
append
append
the
the
latest
latest
hit
hit
to
to
it,
it
and
and
then
then
update
update
the
the
value
value
of
of
the
the
behavior
behavior
subject
subject
by
by
calling
calling
next
next
on
on
it.
it
Now
now
let's
let's
go
go
back
back
to
to
the
the
component
component
and
and
inject
inject
the
the
geo
geo
service
service
into
into
it.
it
Then
then
we'll
we'll
display
display
the
the
hits
hits
from
from
GeoFire
geofire
as
as
markers
markers
in
in
the
the
map.
map
So
so
since
since
we
we
have
have
the
the
hits
hits
as
as
a
a
behavior
behavior
subject,
subject
we
we
can
can
just
just
subscribe
subscribe
to
to
them
them
during
during
n
n
g
g
on
on
init
init
or
or
you
you
could
could
also
also
use
use
the
the
async
async
pipe
pipe
in
in
the
the
template
template
to
to
subscribe
subscribe
to
to
them
them
as
as
well.
well
Then
then
we
we
just
just
need
need
to
to
tell
tell
GeoFire
geofire
to
to
make
make
the
the
query
query
by
by
calling
calling
geo.get
geo.get
locations.
locations
And
and
in
in
this
this
example,
example
we'll
we'll
do
do
it
it
within
within
a
a
500
500
kilometer
kilometer
radius.
radius
In
in
the
the
HTML,
html
we
we
can
can
add
add
another
another
AGM
agm
marker
marker
inside
inside
of
of
our
our
AGM
agm
map,
map
and
and
this
this
time
time
we'll
we'll
loop
loop
over
over
it
it
with
with
n
n
g
g
4.
4
And
and
we
we
can
can
pass
pass
it
it
the
the
latitude
latitude
and
and
longitude
longitude
for
for
each
each
marker
marker
as
as
well
well
as
as
a
a
custom
custom
icon.
icon
Then
then
inside
inside
the
the
pop
pop
up
up
window,
window
we
we
can
can
all
all
users
users
exactly
exactly
how
how
far
far
away
away
they
they
are
are
in
in
kilometers
kilometers
from
from
any
any
of
of
these
these
markers.
markers
Now
now
if
if
we
we
go
go
to
to
the
the
app,
app
we
we
can
can
see
see
when
when
we
we
navigate
navigate
up
up
to
to
the
the
hers
hers
and
and
click
click
on
on
them.
them
It'll
it'll
tell
tell
us
us
exactly
exactly
how
how
many
many
kilometers
kilometers
we
we
are
are
away
away
from
from
that
that
point.
point
That's
that's
it
it
for
for
Angular
angular
Google
google
Maps
maps
and
and
GeoFire.
geofire
If
if
if
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com
angularfirebase.com
where
where
you'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
1
1
on
on
1
1
project
project
a
a
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
In this video, the speaker explains how to use Angular Google Maps and obtain a new location-activated app. They provide pre-built components and directives for Google Maps elements, including a default image, a default URL, and a default AGM location. The speaker also explains how to import the Angular environment and use the Google Maps API to query using the current user's location and find the new AGM location.
Location-based Queries with GeoFire and Angular Google Maps
When building a location driven app, it's critical to be able to query data based on the current user's location. In this episode, we're going to use Angular Google Maps along with Firebase GeoFire to accomplish this task. The app will first detect the current user's location and then query Firebase for any items within a certain radius of that location. Then we'll display those items on the map along with their distance from the current user. To help us along the way, we're going to use the Angular Google Maps package, which includes several prebuilt components and directives for common Google Maps elements. You can install it with npm install agm/coreflagsave. From there, you need to go to the Google Cloud Platform console and enable the Google Maps API. Once enabled, you can generate an API key, and then we'll use that API key in the Angular environment. Here we already have Firebase configured via AngularFire 2, and then we'll also add our Google Maps API key here. Then we can go over to our app module, and we'll import the environment as well as the AngularFire module and Angular Google Maps. Then we can pass AGM or Google Maps API queue when we import it in the module. From here, we'll go ahead and create a new component to handle the map called Google Map. Then we need to give the map a CSS style. We want it to be full screen, so we'll just do a 100 width and height. In the HTML, we'll wrap the map in a div, so it only displays if the latitude and longitude is defined. Then we can use the AGM map selector and pass it the latitude and longitude as input arguments. This will define the center point of the map. Then we can nest AGM markers inside the map and display them at whichever coordinates we want. And if we want that marker to have a pop up window, then we can add the AGM info window, and we can transclude any HTML we want in here. So now we just need to get the current user's location. So we can do this in the component by defining a lat and longitude variable. Then during n g on init, we tap into the global navigator object and we call get current position. And this will return the user's current position, latitude, and longitude on their browser or device. Now if you go to the app and check it out, you should see the map centered on your current location along with a marker exactly where you presently are. Now that we have a basic map to work with, let's use GeoFire to query Firebase based on a GPS location. You can install it by running npm install GeoFire flag save. When you update the Firebase database with GeoFire, it saves a unique string along with the GPS coordinates for a location. This makes it possible to run queries in real time based on a given location's distance from these coordinates. Now let's create a service to interact with GeoFire. First, we'll import the AngularFire database and we'll also import the GeoFire library. And we're also gonna use an RX JS behavior subject to save the ultimate results we get back from GeoFire. So I'm calling the results hits and for now they're just gonna be an empty array. To work with GeoFire, you need to send it a database reference of the location that you're working with. This can be done with AngularFire too by calling DB list and then passing that reference to a new GeoFire instance. 1st, we'll create a function to create new data using GeoFire. It takes the Firebase push key as an argument along with the lat and longitude in an array. And then we can call geofire.set and pass it the key and the coordinates. This will update the Firebase database in the proper format. The next thing we'll do is query data based on their presence within a radius in kilometers this from a given set of coordinates. We do this by calling GeoFire query, pass it the center, which is the GPS coordinates, and the radius, that's how far out we want the query to go. Then we can listen to the key entered event, which occurs when Firebase has returned a relevant data point. It's going to have the key, the location in GPS coordinates, as well as the distance from the center of that circle. We'll go ahead and save this as our own data object called hit, then we can get the current value from the behavior subject, append the latest hit to it, and then update the value of the behavior subject by calling next on it. Now let's go back to the component and inject the geo service into it. Then we'll display the hits from GeoFire as markers in the map. So since we have the hits as a behavior subject, we can just subscribe to them during n g on init or you could also use the async pipe in the template to subscribe to them as well. Then we just need to tell GeoFire to make the query by calling geo.get locations. And in this example, we'll do it within a 500 kilometer radius. In the HTML, we can add another AGM marker inside of our AGM map, and this time we'll loop over it with n g 4. And we can pass it the latitude and longitude for each marker as well as a custom icon. Then inside the pop up window, we can all users exactly how far away they are in kilometers from any of these markers. Now if we go to the app, we can see when we navigate up to the hers and click on them. It'll tell us exactly how many kilometers we are away from that point. That's it for Angular Google Maps and GeoFire. If if this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angularfirebase.com where you'll get a free copy of my book as well as 1 on 1 project a consulting. Thanks for watching, and I'll see you soon.
In this video, the speaker explains how to use Angular Google Maps and obtain a new location-activated app. They provide pre-built components and directives for Google Maps elements, including a default image, a default URL, and a default AGM location. The speaker also explains how to import the Angular environment and use the Google Maps API to query using the current user's location and find the new AGM location.