Swift: How to integrate Google Maps SDK with Cocoapods to Build a Vacation App

Today, we'll go over step by step how to integrate Google Maps SDK for iOS using Swift and Cocoapods to build a Vacation App. We'll go over how to set the map view centered on the interesting places of San Francisco, CA. In addition, we'll place markers on these spots. Next, we take a look at how to animate the camera from one location to then next.

Finally, when we are completely done, we'll have created a flyover application that explores some of my favorite spots the city has to offer.

Google Maps iOS SDK Getting Started:
https://developers.google.com/maps/do...

Completed Project:
https://github.com/purelyswift/integr...
(Note: you'll have to run 'pod install' from the command line to install the Google Maps sdk)

---

Closed Caption:

hey what is up guys welcome back to the
channel and today i'm super excited to
bring you another tutorial and this time
we're going to learn about how to use
google zyliss Maps SDK and looking at
the screen we have our completed
application here and it is a simple
think of it as a flyover view of some of
the more tourist attractions of San
Francisco
so for those of you that have not
visited this beautiful city and if you
guys are flying in from an outside
location location we're going to start
off by landing at SFO Airport and it is
located here
the center of the screen with this
marker on the map and as I click the
next button it's going to take is to the
embarcadero bart station which is the
what we call the underground them subway
here in San Francisco and it takes us
directly to the bay and the financial
district and down town of San Francisco
so clicking next we get to the ferry
building which is just a couple of
minutes away from that subway station
stop
so you can quickly walk to this location
and explore what's there
hitting next again we get to the court
tower which is another a pretty nice
place to walk to if you're close by and
then hit next again we fly to the
Fisherman's Wharf which is a great place
for family fun it's really
family-friendly close to the water and
there's also a museum and aquarium I
believe that's quite fantastic as well
and finally we can fly or drive taken
twenty to the
Golden Gate Bridge vista . and here you
can see the entire city from high above
and the beautiful city skyline
if you're visiting at night having said
that lets the dive into Xcode and create
our project that will integrate google
maps all right
someone all tab into Xcode and command
shift and to create this single View
application like that double click
let's call this Maps demo one and hit
next next and all right I'm going to
change to the iphone 6s and run that
application
I see this changed into the white screen
that we always wish to see on a new
freshly created application
let's go to main story board and this
time i'm going to drag a navigation
controller in there comes with a table
view controller so this is delete that
and hold on to control drag that there
select that as my root view controller
and i'm going to drag this arrow here
that will allow me to start off the
application with this navigation
controller and it uses this view
controller here as my review
so that's pretty good that's where we
want to be for now to remove that line
because that's not something that we
need and having done that we will start
the integration process that go to
chrome and google search and Google Maps
iOS SDK and click this getting started
link right there
having done that step one says to create
your project and then you can install
cocoa bonds by bring that in your
terminal here
this is clear this out of the way so run
that and you can type in your
administrator password and that should
install without a problem for the most
part
now if you do run into an issue it's
probably due to your Ruby installation
being also update your ruby and before
running this
ok so one gem install a great
let's go back to step 3 here and it is
telling us to install the actual google
maps
pod 3 cocoapods so don't concern
yourself too much with what that means
for now all you have to do is right
click on this project here
a new file click iOS other empty next
call it pod file and then here in a copy
and paste this piece of text and i hit
ctrl s to save that and now you have to
go back to the terminal and go to that
pod file to run the installation and
easiest way of doing that is to drag the
pot file here and that will give you a
location of your directory and then
going to the very beginning of that line
runs CD to change directory and now run
pot install so that's going to install
the necessary dependencies which is
google maps and selling to now close
your Xcode project i'm going to close it
out and stop the task and it still needs
to open up this xcode work space instead
so that's this file here and to do that
and say it
open maps in 1x code works basically
that and we'll get the new project
containing the necessary
Google Maps SDK and run and ok that
looks pretty good strength down just a
little bit and now let's go back to our
you controller here
see where are you all right
and now we can start integrating our
google maps into our view
so before we do all of that we need to
go to step forward to create an API key
and click that link to go to developers
console from google it
continue on create new project wait just
a little bit
this normally takes like 20 to 30
seconds but maybe it's my slow
connection that is preventing this step
from running faster any case
just wait a little bit as its enabling
the API and it's generating a api key
for you to a tribute to your google maps
usage so it says you don't have
permission to create an API key and when
I normally find out after clicking that
button again it should work
so let's copy and paste let's copy that
key right there and then as click onto
here you'll notice that all this
information is there and then let's see
it going back to Xcode we can now start
the integration process by first in 40
google maps like that and then here you
want to call GMS services provide api
key with that key that we just copy and
paste it and now we can integrate our
first map view onto our view controller
so we do that by saying that view
schools GMS map
you like that and this requires a frame
let's see going back to the getting
started here - - okay so let's use this
map view with frame method and so it's
called map view with frame for frame was
this you see GG rekt of zero wrecked
ever camera we need a JMS camera
position
let's create that up here
camera equals GM this camera position
and then we'll use a camera with
latitude longitude and is zoom
now let's start by landing at the SFO
Airport
so to do that we will use a plain old
google maps to figure out what the
monster and latitude is sometimes SFO
Airport right here
and by right clicking here and clicking
what's here you see the larger to
latitude show up right there and then
click on their copy and type in the
values are here says 3760 won 2-6 6-2 in
here it's negative 1 to 2 . 3 7 8 9 45 a
zoom level
let's use the value of 10 now that we
have that opens specify that as our
camera and see
we need to set this as our view so it's
a view equals map you right now I'm
gonna run that we hit our view and it is
a little off
I believe see
ok i typed a ladder to run so it's 6 to
12
six to 21 26 - okay
pretty good
so it's actually centered right there so
if I hold down the Alt key it is
centered right there
now let's put a marker on the map by
creating one called AGMs marker and then
we will see created with a position and
let's see what the article says is due
and so position is a seal location
coordinate going to say let current
location equals co-location awkward to
me make and this will be this coordinate
here
I'm copy paste and copy paste
unless this use that as my current
location like snow and I was the same
market . title equals SFO Airport and
marker to place it onto the map we say
marker map equals map view all right
not too bad and you see the marker is
plopped right on the airport like that
so you might be saying why is it zoomed
out so far in the initial view and that
is because the zoom level is set at ten
the higher the zoom levels i just
changed from 10 to 12
the closer you are zoomed into the map
so 12 is a pretty good value there
and now we have a pretty good base
foundation to create our application
nothing too hard as long as you get the
installation setup properly now let's
create our next button up there by
simply saying navigation item right
Barbra
a bar button item you I bar button item
title initializer say next
this will be Lane self and selector will
be next
which is created down here by a function
next and then let's decide where we want
to fly to next in the devil application
we took the the bart subway that takes
us to the embarcadero station and I want
to type in here in bark dare row part in
there
so the bart station is right there
smack that in the middle of downtown San
Francisco
so it's what's here you get the latitude
and longitude and so let's say next
location
equals
CL location and we need to punch in
these two values and this cop in the
face
so that I don't get it wrong like last
time
place there and then we can say map view
but we don't have a reference that video
here so let's uh let's go ahead and
create our map view then
alright so let's create a variable
called Matt be and say Matthew is GMS
that view and we have to specify an
optional with a question mark so that we
can set it here so we'll get rid of the
length and now we have our Matthew there
and then
matthew is reference down here as well
and so if we set camera equals this a
new camera like this
let's just copy that and then now we
have C so next location this is
embarcadero now we can specify next
location latitude and next
Luke see next location . longitude and
bump that up to 13
so see what that does when we click on
next in the navbar click next and then
that brings us right there centered on
to in Parkdale and end up to 15 and also
create a marker for it
so the market and then this will be next
location and see this will be a market
their own station
I think that's how you spell it
bring that and hitting the next up here
we get SFO next embarcadero station
hitting that marker we get embarcadero
station length that it's pretty good you
can also include a snippet here
let's see sup way
it's called that i'll show you what that
does
just a moment next in that you see a
little sub title that says subway
cool now the next question is how do we
implement a strategy to hit the next and
then consistently and go from one
location to the next to the next and the
next until we get our final destination
the easier way of doing this is to
create a rate of what i'll call
destinations
so i'm going to call it destinations
destinations and equals something
so we need some type of array in here
and that is going to be an array of what
i'll call a vacation vacation
destinations and so let's create a new
class called vacation destination like
this sub classes and his object and
let's create a couple of variables
called name location
this will be a CL location coordinate t
see it let's just get rid of the
question marks there and then let's just
also use a zoom like that
and here will create an initializer
locations LOL occasion to d float
flipped this is a zoom and having to
that we need to set the class variables
like this
so that's in legal zoom and so here I'm
as a vacation destination is a name
so this cause SFO airport location is
see this is use this location here
because that's our location
i'm going to change this as our
embarcadero parqueadero station and this
will be C was 15 down here
that means we will just do that and then
destinations
okay that looks pretty good and for here
we can do a little bit a little
something different which is to say okay
- - all right
this is capture something else as well
so called current destination vacation
destination is that so I was eight
if current destination is no let's grab
the first one so destinations that first
ok current destination
it was that now and then in here i'm
going to say camera will now equal JMS
camera camera with target
this is use this year and then camera
the target will be use the location of
that so we can safely
unwrap that and then this will be the
zoom also unwrap that
and now we can remove this here can also
copy and paste that in side of this
block now let's say this will be
current destination see that location
yes ok this will be
let's see current is your jacket name
and let's get rid of the snippet for now
let's run that and see what we get
next step we get that this isn't broken
arrow station
alright so the tricky part is to include
a second location in here and i'm just
going to include the ferry building
so let's try another one and it's called
a fair you building and the location
will be since the location is around
here call a ferry building marketplace
what's here is that copy go back here
and then
so I'm going to take that see location
make latitude is that and then logic
eight is that copy and paste that in
there and this is a zoom level of maybe
even 16
ok now so if we have the next and
current destination is already the
embarcadero station will say okay else
we need to find the next destination
so this is a little bit trickier so
let's first find the index of the
current destination say that
destinations index of and then we'll use
a current destination like that
that's unwrap that and then we'll do
this a little safely like the bat and so
this is if just makes sure that we bind
the index to a not no value
all right now that we have the index we
just want to get
the destination by saying current
destination is now equal destinations
index plus 1 and now we can I guess copy
and paste this down here will clean that
up a little bit later okay
alright so let's sit next to that gets
us to the embarcadero next that gets us
through the ferry building right there
we can even bump that zoom level up to
maybe 18 and that will get us a closer
view of what is on the map that next
next
all right that's pretty good so you see
how kind of choppy that was animating or
actually not animating from SFO to
embarcadero known to ferry building we
can enable a animation like this
so let's just say map view animate to
counter precision like this like that
and that's copy and paste all that
inside of there
that's good and then we will copy and
paste that and there as well bring that
we should see a smoother animation going
from location to location like that and
like that and they notice how fast that
was to to get from one location to
another
it's flying a little too fast
in my opinion and the way to slow it
down is to do something like this
let's go see a layer see what is it
let me see what i have here ok so it's
actually
see a transaction done begin and then
we'll say a see a transaction that value
for key and this is the amount of time
to transition so its animation see what
i have here
see a transaction animation duration
huh alright so this value is the amount
of time it takes to fly and if i see
commit the transaction like that don't
change the block that is between these
two and animation commands the next
so that takes two seconds and this will
be the one second animation down below
here
let's just create a private function
that helps us and set up all this right
there and this is cut that is called set
camp set map camera and paste that in
there and then we'll see time that up
just a little bit here current
destination
alright cool cool cool
so having that available down there will
say that and then
now that we have current destination set
up properly up here all we have to do
this a set map camera
alright so next
it takes two seconds to fly there and
the next
it takes another two seconds to fly
there so that's pretty good home now
that you get the idea as to how to fly
from one destination to the next
you can see how you can easily create a
an application for yourself that tracks
where you need to be and then where you
need to go as your next spot of interest
so that's pretty easy right and this is
not too difficult as long as you get the
installation process that are properly
using the get it
getting started guide in Chrome yeah
that's pretty much it
and that's all i wanted to go over today
hopefully you enjoyed this tutorial make
sure to LIKE and subscribe and tell me
what kind of projects you are working on
right now what kind of help you would
like as well
alright injury day and enjoy coding as
well my my