Advertisement
iOS SDK

iPhone SDK Quick Tip: Launching Maps In-App

by

The iPhone Maps application is a revolutionary program that combines the power of GPS and Google Maps with an incredibly user-friendly interface. This Quick Tip will teach you how to begin taking advantage of this functionality by launching and configuring the Maps app from within your iPhone SDK project.

Step 1. Take a Trip to Paris

Launching the Maps application within your own app can be done with just the following two lines of code:

UIApplication *app = [UIApplication sharedApplication];
[app openURL:[NSURL URLWithString:@"http://maps.google.com/maps?q=Paris"]];

On line one, we request a reference to the currently running application instance from the UIApplication class.

On line two, we tell the application to open the supplied URL, which in this case is a valid Google Maps URL. Rather than open the map in Mobile Safari as you might expect, the application instance is smart enough to realize that this request is better handled by the Maps app, and will launch it instead.

Note: Unfortunately, the iPhone Simulator will not open the Maps application with the above code (the Simulator does not have the Maps app). You will need to run this snippet on an actual iPhone OS device to test. Running this code in the iPhone Simulator will launch Google Maps in Mobile Safari.

Paris Map

Voila! Welcome to France.

Step 2. Configure Additional Parameters

Now that we understand the basics, let’s dig a bit deeper into the functionality offered by the Maps API.

The URL we supplied above is formatted as an HTTP GET post to the Google Maps application. It submits the parameter “q” set to the value of “Paris.” The “q” stands for query and it is the most general request type that we can make. A few other commonly used parameters include:

  • ll=: Stands for “latittude/longitude” and allows the user much greater accuracy when pulling up maps. This parameter is often used in conjunction with the on-board GPS to plot a “You are Here” point display. The value for this parameter must be supplied in decimal format and must be comma separated.
  • saddr=: The start, or “source,” address to use when generating driving directions.
  • daddr=: The end, or “destination,” address to use when generating driving directions.
  • t=: The type of map that will be displayed.
  • z=: The zoom level of the map that will be displayed.

As you may have guessed, you can combine multiple parameters in one GET request. This is done by joining them with the ‘&’ symbol.

You can find more detailed information on supported parameters (with examples) from the official Apple Inc. documentation here.

Step 3. Send Your User to the Eiffel Tower

Let’s conclude with an example of how to combine some of the custom parameters above and send our users to a satellite view of the Eiffel Tower.

The Eiffel Tower is located at Latitude 48° 51’ 32” North, Longitude 002° 17’ 45” East. However, this information is of little use to us in the current format. We need to convert the Degree/Minute/Second format into the decimal format required by the Google Maps ll= parameter.

There are many tools available for quickly doing this online, but, when working with Google maps, I like to use a simple trick to generate a latitude/longitude pair from the map. After you have the location you’re interested in centered on the screen, insert the following code snippet (taken from here) into your browser address bar and press enter:

 javascript:void(prompt('',gApplication.getMap().getCenter()));

We’re left with the decimal format of latitude 48.85812229675187 and longitude 2.294490337371826.

Now, to send our user directly to the Eiffel Tower, we could paste in the following:

[app openURL:[NSURL URLWithString:@"http://maps.google.com/maps?ll=48.85812229675187,2.294490337371826"]];
Eiffel Tower Map

By default, this will launch with the graphical map type. This isn’t nearly as impressive as seeing the real thing, so let’s change the map type to satellite by appending ‘&t=k’ to our query string:

[app openURL:[NSURL URLWithString:@"http://maps.google.com/maps?ll=48.85812229675187,2.294490337371826&t=k"]];
Eiffel Tower Zoomed

This works, but our view from the top is just a bit too close. Let’s step out a little bit by setting the map zoom level with ‘&z=19’:

[app openURL:[NSURL URLWithString:@"http://maps.google.com/maps?ll=48.85812229675187,2.294490337371826&t=k&z=19"]];
Eiffel Tower Zoomed

Perfect. La tour eiffel in the palm of our hand.

Related Posts
  • Computer Skills
    App Training
    Getting the Most From Maps in OS X MavericksMaps400
    Whilst OS X 10.9 Mavericks is reported to have some two-hundred changes, over 10.8 Mountain Lion, there’s really only a handful of immediately visible changes. Apple’s new Maps application is one of the most apparent. In this tutorial, I will show you how to get the most from the new Maps app. You’ll soon wonder how you ever managed without it.Read More…
  • Code
    iOS SDK
    iOS 7 SDK: Background Transfer ServiceIcon ios7 v3
    This tutorial will show you how to use the background transfer service, a Multitasking API provided by iOS 7. I'll teach you how to create an app that will download a file without the application in the foreground. Once the file fully downloads, a notification message will pop-up. Continue reading to create this service!Read More…
  • Computer Skills
    App Training
    How to Sort Your Images by Location in iPhotoIphoto retina 400
    Geotagging is a great way to organise your snaps, and in iPhoto this is a simple thing to do. Geotagging benefits photographers by allowing them to find images quickly by location instead of date -- something which you are prone to forget. In this tutorial I will show you how to add the location to images and then find them quickly using the built in map on iPhoto. Discover how easy this task is!Read More…
  • Web Design
    HTML/CSS
    Linking Up the Google Maps and Flickr APIsGoogle map flickr retina
    Imagine you've made the beautiful map a client requested; adding all sorts of interesting markers, pop-ups, custom overlays and photos.  But then the client mentions they want to be able to add their own photos without either troubling you, or doing any coding themselves. This is where the Flickr API comes in very handy.Read More…
  • Code
    Android SDK
    Android SDK: Working with Google Maps - Google Places IntegrationAndroid google maps v2 preview@2x
    Google Maps provides Android developers with localization tools that can be included within your own app interfaces. In this series, we are creating a basic Android application with Google Maps and Google Places integration. In this part, we will access the Google Places API to retrieve information about places of interest near the user's current location. We will use the returned data to present markers for each place on the map in the final part of this tutorial series. We will also set the application to update the map markers when the user's location changes.Read More…
  • Web Design
    UX
    Making Websites Location Aware With HTML5 GeolocationLocation preview
    Assumption can be a risky business in the world of UX, but some assumptions can enable you to deliver a more tailored user experience to your visitors. We're going to look at enhancing user experience by making your websites location aware.Read More…