Custom Interactive Maps with the Google Maps API 17 HTML5 Geolocation Video

using html5 we can get a users current
location and that returns to us a
position object that provides us with a
Latin along so it only makes sense that
we can use that data to trap a map
marker onto where the user is located so
the first thing to do when you're
checking for html5 geolocation you check
the Navigator object and if the
Navigator has a geolocation object then
you know that we'll be in business for
grabbing the users location so if
geolocation exists we'll call navigator
geolocation and then we'll call the
function get current position and that
will take in a callback and then we'll
pass through the position object to that
callback and you can see we get this
little notification up here this website
wants to use your computer's location
and you can either deny it or allow it
in this case we'll allow it
so now we'll console dot log the
position object so in the log we see geo
position and we can see that we have
coordinates the coordinates give us an
accuracy as well as the latitude and the
longitude so we can tap into this
position that Accords that latitude and
longitude so since we have the position
object we can call map stir and we can
add a marker and we can set the light in
the long
so now you can see that we've added the
marker to the current location and you
might be wondering why I'm out in the
middle of the ocean and no I don't live
on a houseboat I'm actually using a cool
feature within Google Chrome so within
the console we can click on this button
up here which is called the drawer and
once we've opened the drawer we can
click on emulation and we can go into
the sensors tab within there we can see
there's an option to emulate geolocation
coordinates and from there we can set
the latitude and the longitude and we
also can emulate if the position is
unavailable so we actually can change
this to be the equator if we want so now
you can see we don't see anything but if
we zoom out we can see that we're right
on the equator so even though getting
the user's location is part of html5 and
not Google Maps we can still use it and
plug it into the library so we'll take
this functionality and we'll put it into
our map stir library so below geocode
will create a function and we'll call
get current position and we'll have that
taken a call back and we'll check on the
navigator to see if geolocation is
available and we'll check on the
navigator to see if geolocation is
available and if it's available
we'll call navigator dot geo location
that get current position and we'll pass
through the callback that returns us the
position and within here we can call the
call on the callback method and pass
back the position and now we'll create a
method for this inside the jquery widget
we'll call get current position instance
authority in the library will call this
dot map dot get current position so now
in our script will comment this out or
call get current position and then we'll
pass through our callback and then we
can call map stir again to add the
marker however one thing to be aware of
is the value of this inside the callback
traditionally when you're using jQuery
the value of this always returns back to
the jQuery object and currently it's not
doing that
right now this is actually referring to
the window so this means that we have to
call this map stir and we actually can't
call this master because this should be
the element that we're actually
operating on so to change that we'll go
into the master ojs so to change that
will go into our jQuery UI so in this
lesson we were able to use the html5
geolocation API to add a map marker