Maps Shortcuts: Indoor Maps in the Google Maps SDK for iOS

Mano Marks shows you how use the Google Maps SDK for iOS (http://goo.gl/8n3lV) to create a map that has indoor floor plans and how to create a custom level picker in your app.

---

Closed Caption:


Hi, I'm Mano Marks.
I'm developer advocate on the
Google Maps Developer
Relations team.
I want to welcome you to this
week's Google Maps shortcut.
In this episode, we'll be
talking about the Google Maps
SDK for iOS and, specifically,
I'll be talking
about indoor maps.
Google Maps SDK for iOS allows
you to both add indoor maps to
your Maps application and
control what level is shown
within the building when you
are viewing the different
buildings in the SDK.
This is a pretty exciting
feature and it
could be pretty powerful.
For instance, if you wanted to
have a application that showed
special offers in a department
store, then you could choose
which level to show somebody and
put a marker directly in
that location.
I'm going to get into the app
in a moment, but I wanted to
mention that at Google I/O in
2013 we did do a tech talk on
indoor maps and, specifically,
how we collect that data and
how we locate people
within Google Maps.
So you might be interested in
checking that one out, and
here's a link to that video.
OK.
Let's take a look at indoor
maps in the SDK.
You can see here we've
got a list of demos.
I'm going to select Indoor and
you'll see the indoor map.
This is actually Moscone Center,
and you'll see this is
level one here.
And as I move through it, and
the different levels in the
level selector it changes
the floor.
That's on by default.
No additional code is required,
just as soon as it
gets close to a building it
decides that that is the
building that's in focus,
then it will
turn on a level selector.
OK.
Let's take a look at
the Indoor with
Custom Level selector.
So you can see here there's no
default selector, but there is
this Custom selector here in the
application, in the demo.
So as I, again, select different
points within the
selector, it changes
the floors.
And interestingly, as I move
to a different location,
you'll see it's chosen
a different--
it now decided that a different
building is in focus--
it changes this level selector
here to reflect that.
Let's take a look at the
code for how this
actually comes about.
OK.
You can see here I'm creating
my view controller.
I've got the Customer Indoor
View Controller.
And I'm creating
three objects.
I'm creating the map view--
which you would do anytime
you're using the map.
I'm using a UI Picker View.
It's a standard one, it's
not the Google Maps one.
A UI Picker View is a convenient
way to demo this.
You can, of course, create
your own view if
that's what you want.
And then I have an array,
levels, which is just the
different floors of
the building.
OK.
So now on viewDidLoad I'm
creating my map normally and
setting it within the view.
And you can see there
the camera position.
Same camera position.
And there's three lines
here that are
particularly important.
The first one is I'm turning
the Indoor Picker off.
That's because I don't want
to use the default one.
I want to use the custom one
that I'm going to show you.
And I am turning on Indoor.
IndoorEnabled = YES.
This is actually on by default,
but this is just to
show you that you can do
this programmatically--
turning on Indoor, turning
off Indoor.
And then, importantly, I'm
setting the Indoor Display
delegate to Self.
That's basically so that any
indoor events gets handled by
this view controller.

OK.
So here's what happens when the
active building changes,
which happens as soon as the
view is instantiated, and then
also when you're
moving around.
This is the
didChangeActiveBuilding event.
This is what happens, this is
why we did the delegate.
OK.
So we create a levels mutable
array, and then we add objects
to that array from
building.levels, which is the
building comes along
with the event.
When it gets fired, you
get building back.
It's an object within the SDK.
And that has levels as its
primary purpose there.
And then we then take the levels
array that we created
at the beginning when we
instantiated the view
controller.

We copy the levels
array into that.
And then we have the picker
reload all its components.
We basically are saying, there's
something new here,
reload the picker.
So that's particularly
the code that
you need right there.

And then this here just shows
you how the picker actually
selects the level, the
text for the level.
It's basically going through the
levels object row by row
and saying what's
the level name.
Now you may have noticed that in
the default Indoor demo the
name of the levels was a short
name, whereas there is a
longer name in the custom
level picker demo.
That's because each level has
a long and short name and
we're using-- by doing
.name, we're doing
the long name there.
OK.
So then the next thing that we
look at is how it sets the
active level.
So when this is just an event
that fires when you select a
row in the picker, it
changes the level.
So you're just doing
Set Active Level
on the Indoor display.

And then finally, we have code
that, if you change the level
through some other means, it
will keep the picker in sync
with the current level.
So that's not 100% necessary for
this particular demo, but
it's a useful thing to always
do just in case
something else happens.
OK.
So if you have any more
questions about the Google
Maps SDK for iOS, take a look
at the documentation.
We also have a playlist of
videos from the Google Maps
SDK for iOS.
This is from our Google Maps
shortcuts and other episodes
that we've been doing here on
"Google Maps Developers Live."
And of course, if you have any
additional questions, you need
any help, as always, go on
over to Stack Overflow.
There's lots of people
there who can help
you with your questions.
Thank you very much.
That's all for now.