Hello, I'm Brett Morgan from the Google Maps Developer
Relations team here in Sydney.
This week, I'd like to show you how to add custom
InfoWindows with the Google Maps SDK for iOS.
InfoWindows give contextually relevant information to your
users quickly and painlessly.
Time to dive in.
Here, we have the code for Google Map integration in an
iOS application.
As you can see, I'm configuring the map for point
of interest by declaring a serial location coordinate
2-D. I construct the GMS Marker for the point of
interest at the center of the map view and add the
Marker to the map.
Note, I've set the title attribute as the Marker.
And this will bring out our default InfoWindow rendering
when a user taps on the Marker.
Let's have a look at that in action.
Now, this is pretty good and really, really easy.
But sometimes, you want to display more
than just simple text.
If your application is about real estate sales, you could
show the expected sales price.
If you're building a cinema application, why not show
which movies are showing at the cinema today?
For these cases, a custom InfoWindow
is the perfect thing.
I'm going to build a custom InfoWindow that shows a photo
at a point of interest.
I have a .png asset here that uses the background for the
InfoWindow and a photo of the Sydney Opera House.
I need to do a series of steps here.
First, I'll construct a new NIB file to configure how the
UI image and UI labels are laid out.
Then I'll create a new UIView subclass called
CustomInfoWindow that will act as the binding
type for the NIB file.
Finally, I will configure the UILabels and load the photo
the Opera House into the InfoWindow when the user taps
on the Marker.
So let's create the NIB file,
selecting View as the template.
Name the file InfoWindow.
This brings up Interface Builder.
Reconfigure the size of the UIView to match the underlying
ping asset that we are using as the InfoWindow background.
For this one, it's 224 points wide by 221 points high.
Then we add a UIImageView to host the InfoWindow's custom
background.
Next, we add and configure a pair of UILabels, one to act
as a point of interest title and the other as the address.
Next, we add in UIImageView to display the photo.
Now, we create a new class.
Name this file CustomInfoWindow.
This creates the matching header and
implementation files.
We add the IB outlets matching the UILabels and UIImageView
that we configured in the Interface build up.
Back to InfoWindow New File.
We can now configure the custom class that this new
file is going to construct.
We can wire up the IB outlets to their matching
configurations in the new file.
And now, going back to our ViewController, we need to
make sure this file is acting as a delegate of our MapView.
We can do that by declaring that the ViewController
conforms to the GMS MapView delegate protocol,
MViewController.h.
Next, we instantiate the CustomInfoWindow using NS
bundles, load NIB named owner option selector.
And then configure the return instance with the name of our
point of interest, along with the photos we have to really
show it off.
So what have we just done?
We started with the Google Maps for iOS application with
a default Marker.
Then we configured a custom InfoWindow in Interface
Builder using a custom background image and with
additional information over and above the default title,
subtitle combination.
Finally, we configured our ViewController to conform with
our GMSMapViewDelegate protocol.
So we could construct the custom InfoWindow from our new
file and hand it back to the MapView when the user taps on
the Marker.
I'm hoping this quick introduction to custom
InfoWindows has shown you a way to add personality to your
iOS application and empower your users to get the most out
of your app quickly and painlessly by presenting
geographically relevant information without the need
to take the user away from the map.
If you have any questions about what we have covered
here today, please feel free to reach out to us, either on
Google+ or on Stack Overflow.
Thank you very much for your time.