Video icon 64
Learning to code? Skill up faster with our practical video courses. Start your free trial today.
Advertisement

iPhone SDK Quick Tip: Launching Maps In-App

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

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.

Advertisement