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

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


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.