Chapter 7: Integrating with iPhone Services
167
Pointing on Google Maps
While Google Maps does not have its own custom
href
protocol, Mobile Safari on iPhone is smart
enough to reroute any request to
maps.google.com
to the built-in Maps application rather than going
to the public Google Web site. (On iPod touch, Mobile Safari links directly to the public Google Web site.)
As a result, you can create a link to specify either a specific location or driving directions between two
geographical points.
You cannot specify whether to display the map in Map or Satellite view. The location you specify will be
displayed in the last selected view of the user.
Keep in mind the basic syntax conventions when composing a Google Maps URL:
❑
For normal destinations, start with the
q=
parameter, and then type the location as you would a
normal address, substituting + signs for blank spaces.
❑
For clarity, include commas between address fields.
Here’s a basic URL to find a location based on city and state:
<a href=”http://maps.google.com/maps?q=Boston,+MA”>Boston</a>
Here’s the syntax used for a full street address:
<a href=”http://maps.google.com/maps?q=1000+Massachusetts+Ave,+Boston,+MA”>Jack
Armitage’s Office</a>
c07.indd 167c07.indd 167 12/7/07 2:53:46 PM12/7/07 2:53:46 PM
Chapter 7: Integrating with iPhone Services
168
When the address shown previously is located in Google Maps, the marker is generically labeled

z=
parameter to indicate the map zoom level, or even
layer=t
to turn on
the Traffic display. The user needs to perform those steps interactively.
c07.indd 169c07.indd 169 12/7/07 2:53:47 PM12/7/07 2:53:47 PM
Chapter 7: Integrating with iPhone Services
170
In order to add Google Maps integration with iProspector, two new capabilities need to be added to its
Contact panel. First, multiline, read-only address information needs to be displayed in its own box.
Second, a new action button style needs to be created to emulate the button functionality of the native
iPhone Contact UI.
Creating a Contacts Address Box
To define an address box, define a
div
with a new style named
rowCuiAddressBox
. Inside of it, add a

cui label
and then
cui p
elements for each line of the address:
<fieldset>
<div class=”rowCuiAddressBox”>
<label class=”cui”>work</label>
<p class=”cui”>1520 Main Street</p>
<p class=”cui”>Boston, MA 01210</p>
</div>
</fieldset>

The
:first-child
and
:last-child
styles are used to ensure proper padding and sizing of the
contents of the box.
To style the address box label, one additional selector needs to be added onto the previously defined

.row > label.cui
rule:
.row > label.cui, .rowCuiAddressBox > label.cui {
position: absolute;
margin: 0 0 0 14px;
line-height: 42px;
font-weight: bold;
color: #7388a5;
}
The display-only address box is now ready.

Creating Service Buttons
Two new links are needed to add Google Maps integration. One link will display a map of the contact
and a second will provide driving directions. Here is the
fieldset
definition:
<fieldset>
<div class=”row”>
<a class=”cuiServiceButton” target=”_self”
href=”http://maps.google.com/maps?q=1000+Massachusetts+Ave,+Boston,+MA”>Map To
Office</a>
</div>