Custom Interactive Maps with the Google Maps API 16 Geocoding Video Lecture | Customize Interactive Maps with Google Maps API for Website/App - App Development

so currently whenever we want to add a
marker we have to do it by calling this
add marker function and passing through
a Latin along however what we'd really
like to do is actually pass through an
address or a place and get a marker
added by that and this concept is known
as geocoding so in this lesson we'll
take the Google Maps geo coder service
and we'll write it into our map stir
library so right now it'd be a pretty
cool feature for the user to be able to
call add marker and rather than passing
through a lot and along they can pass
through a string and we can call it
location and they can pass through the
location that they want the marker to
land on so currently this won't work so
let's see if we can build this into our
API so to get this to work we need to
build up a geo coder so up here at the
top will create a geo coder and it's no
different than any other object we've
created so we have a new Google Doc Maps
that geo coder and the geo coder will
take any parameters in and down here
we'll create a function and we'll call
it geo code and since we have access to
this geo coder we're gonna call the
function on the geo coder which is also
called geo code and the first thing that
the geo coder takes it takes in an
address and then it takes in a callback
function and the callback function
returns the results as well as the
status and when you're checking a geo
coder you need to make sure that the
status was okay and that it didn't fail
so we need to check to see if the status
is equal to an okay status and to do so
we can tap into an enum within the
Google Maps namespace and that's the geo
coder status and we can check to see
that it was okay and if it was okay
we'll console dot log the results else
we'll console dot error the status so
down here we'll call geo code and we'll
pass through the address and the address
is the Golden Gate Bridge so in the
console we see that we have this array
of one object and if we open it up we
can see that we have these address
components and the address components
provides us
what it is it's the Golden Gate Bridge
it's in California the United States and
this is the zip code as well and then
right here is the formatted address and
then the types is that it's a point of
interest and also an establishment so as
you can see we get some metadata about
our location as well so now we can tap
into geometry and it tells us that the
location type is approximate but what
we're interested in is the location and
this is the land along so from here we
can add a marker but rather than just
adding a marker inside of this if
statement we can fire off a success
callback and the same goes down for here
for the error we can fire off an error
callback and for the error callback we
just need to return the status so now
that on the Geo code function will
provide our success callback and then
we'll provide one for our error callback
as well and this might look a bit
familiar to you if you use jQuery when
you do an ajax call you can provide a
success and an error callback and this
is set up the same way so from within
here we can add a marker you can tap
into our map stir and then using the
results we can provide a Latin long so
we'll get the first results because
we're only getting one back
and we need to call result the geometry
dot location and then call the lab
function and then we need to do the same
thing with the long and you can see that
we actually get the marker dropped on
where the Golden Gate Bridge is so this
right here is the scaffolding for us to
use the geo coder function it's an
asynchronous method so we have to
provide a callback for a success and a
callback for any error but within it if
we get a good response we can then
return these results and these results
are array of places that came up through
the search in this case since there's
only one Golden Gate Bridge we're just
getting one result back and from within
there we can grab the location and that
gives us the lat/long
to add a marker so we'll comment this
out and we'll implement it in our map
stir and just like we're checking for
the cluster we'll check to see if we're
geocoding and if we're geocoding we'll
set the property for that so now we'll
go into map options and we'll set that
to true so we'll create a function and
we'll call it geo code and that'll take
in some options and within that function
we just paste it in what we wrote in the
previous tab and this does the same
thing it just attaches it to the map
store library so now that we have the
geo code function inside our map store
library will modify the add marker for
our jquery widget so if we have a
location attribute we know we're going
to use the geo coder else we'll just add
the marker by the options
so now we'll call this geo code and
we'll set the options so we'll set the
address to off start location and we'll
set a success as well as an error
callback and since we're going to be
inside these callback functions will set
a self variable so inside the success
callback we want to iterate through the
results that we get back and add them to
the map so we'll fire off the forage
function on the results array and for
each one of the results we're gonna add
the map marker but first we need to set
the options
well set the options that lat equal to
results that geometry that location dot
lat and then we'll set the long and then
we'll call self dot map dot and marker
and we'll pass in through these options
and the reason why we're tacking the
lat/long on to the options is that the
options contain other things that we
want to fire off such as events so it
just makes sense to modify the lot along
rather than have to carry out all of the
options onto another object and now
we'll go back into map stir and one
thing that will air out on is we're not
calling this dot geo coder send out back
in our jQuery widget when we're adding a
marker we're gonna check to see if
there's a location property on the
options if that property exists we knows
to geocode
if it doesn't exist we're going to add
by the original options so if we geo
code will pass through the location as
the address and then we'll fire off a
success callback where we iterate
through all of the results we set the
options that latitude and longitude and
then we pass that through adding the
marker so now in our main script file
will uncomment this and we can see that
we get something on the Golden Gate
Bridge and a cool feature of this is
that we're iterating through all of the
results that come back from the geo
coder so if we provide something generic
like 1111 Main Street now when we zoom
out we're getting all the 1111 Main
streets that come up from the geo coder
now this may have some unintended
consequences for you but this can be
offset by being very specific within
your location and also since we provided
the geo code function on the map store
library you can tailor a more custom
function within the jQuery widget