Using Maps (Swift in Xcode) Video Lecture | Swift in Xcode: The Complete iOS Development Guide - App Development

hey everybody today I'm going to show
you how to use map kit inside of your
application with Swift and Xcode so
let's go ahead and get started this is
what we want to accomplish inside of
this tutorial we have our Pizza RIA just
a random pizzeria load it up into our
scene and it's going to have an
annotation that will say pizza
restaurant a it'll be the name of the
pizza that we are loading up inside of
our map kit and it's also going to load
up in a specific view so it's not
confusing to the user so let's go ahead
and get started alright first thing we
need to do is open up Xcode and create a
new Xcode project this is going to be a
single V application click Next and our
product name I'm just going to call mine
map and our language will be set to
swift general devices will be set to
iPhone click Next and create and now
let's just open this up a bit bigger for
you guys and let's head over to our main
dot storyboard and I'm just going to add
our map kitview onto our scene so right
down here our map Kipp view just click
and drag that over to our view
controller and we're going to right
click or control click and drag from
that map view over to our view right
over here and we're going to Center
vertically Center horizontally you have
it make it have equal Heights and equal
widths so now it's going to fit
perfectly inside of our view now let's
go over to our view controller dot Swift
file and we're going to import our map
kit class so just say import map kit and
also import and this is actually map
capital K kit and then we're also going
to import our core location like so so
now this is going to allow us to use
their their frameworks or their code
that they've already done for all these
map kits and whatnot and we're going to
utilize that inside of our own
application so now that that's done
let's go over to our view controller
and into our viewdidload and before we
do this let's go over to our main dot
storyboard open up our assistant editor
and we're going to right-click or
control click and drag from our map kit
view and create an outlet and this
outlet is going to name our map so I'm
just going to call my math map now
connect and now we have I connected up
and we have our outlet called map now
let's go over to our viewdidload and
we're going to say we're going to create
an annotation to put inside of our map
so if we were actually to build and run
this right now it wouldn't work exactly
properly we it would load up so you
would see this but we want to add an
annotation into this view and make it a
bit easier for people to find a location
- like your the store that they're
referencing or anything like that so
let's go ahead and continue on and add
an annotation so we can see this view so
first off we need to say see VAR
location equals CL location coordinate
2d and this is going to be a 2d make and
our latitude will just be I actually
have a latitude and longitude open up
inside of Mar inside of Safari and you
could just look this up on the internet
but I have a universe media dot papers
whatever am yeah I'll link it down in
the description down below but you can
also just search a latitude longitude or
coordinate finder Google Maps or
something like that this is how I found
found out about this and I have just a
random pizzeria and I have the latitude
and longitude right there
so I can easily just take this latitude
copy and paste that into the latitude
inside of our coordinate that we just
created I'm going to add a space so this
is a little bit easier to look at and
then we need our longitude so like that
and just put that right inside of there
so now we have our location set up and
now we want to take this location and
add
annotation wherever that location is so
we can save our a notation equals m'kay
point annotation open parentheses close
parentheses so now we have this
annotation created and now we're going
to add where this annotation should be
put and also where the title and what
the subtitle and title of this
annotation should be so we can say
annotation dot set title
I'm sorry set sorry we're just going to
set the coordinates first and the
coordinates is actually the location
that we just created right up here so
inside of this dot set coordinate we can
just put location location so now we
have this annotation with that we have
created and then we can also say
annotation dot title is equal to and
we'll just put in the name of the
pizzeria so we can say pizza
Risto Rahm de rompe like so and
annotation dot subtitle so this is like
if you have any additional information
it would be Luna Rossa or equals Luna
Rossa so now we have our annotation with
our title and our subtitle and I'll show
you what this show it looks like right
now so if we built and ran this we will
now have an annotation built in wherever
where this place is just actually down
in Paris and if you hold option you
actually can get this to zoom in and
that's right we didn't add this
annotation on to our scene that's why I
wasn't loading up so we need to say map
dot add annotation and we're going to
add the annotation that we just created
so now if we built and ran this we
should see our annotation and it's right
over here in Paris so now we can just
zoom in on our annotation now if you are
actually doing this for an application
this would be quite annoying for the
navigators of your app because they
wouldn't be able to find whatever they
were looking for really fast or find
your restaurant really fast so in order
to fix this you want to create or when
this map loads up you want it to be
exactly where this restaurant is say
right here we would make this restaurant
appear in this little window right here
so you would see it automatically and
then also if you click on this
annotation right now you will see pizza
restaurants a restaurant a which is the
title that we created right here and
then you have the subtitle Luna Rossa so
now we're going to make this a bit
easier for the user of your application
so when your app loads up it's in that
specific area where that restaurant is
so in order to do this you just say var
spam equals MK coordinate span make in
this latitude Delta and the longitude
Delta this will be equal to point zero
two and I'll show you exactly what this
means this will be zero point two and
hour longitude will be also zero point
two I'll show you exactly what this
means in just a moment so now we have
that done and then we can say var region
is equal to MK coordinate region region
and then open parenthesis and this is
going to be the center so the center of
your region would be exactly where your
location is for your pizzeria and then
your span would be the span that you
just created so this is the region that
we want to show up on a map and so now
you want to add this region onto your
map by saying map dot set region and
this will be the region that we just
created or animated this will be equal
to true sorry true because it is a bool
so now we are setting the region of our
map to the region that we created right
up here with the span of the span that
we created out here and we're setting
the center of the to the location that
we created right
so now if we were to build and run this
you will see that we'll load up in the
exact location that we want it to so now
we have loaded up and there is our
pizzeria right in the middle of our
scene like so but you might be thinking
oh well I don't want it to show so many
of this so much of the city so in order
to fix this you would need to change
your span so I'm going to make mine
point zero zero zero two that way we
have a very tight coordinate location so
now if we were to build and run this you
will see that it will load right there
in front of our pizzeria Ristorante so
there you have it that is how you use UI
map kit I hope you enjoyed this tutorial
and I will see you in the next one
that's it for this tutorial if you
enjoyed it rate that like button down
below and if you want to see more
tutorials like this for me in the future
be sure to subscribe anyway thank you
guys so much for watching and I will see
you in the next one peace
you