Tài liệu Lập trình iphone chuyên nghiệp part 15 docx

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=” /> Here’s the syntax used for a full street address:
<a href=”
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
1000

Massachusetts Ave Boston MA
. However, you can specify a custom label by appending the URL with

+(Label+Text)
, as shown in the following example:
<a href=” />+Armitage’s+Office)”>Jack Armitage’s Office</a>
Figure 7-10 shows the custom label in Google Maps.
Figure 7-10: Customizing the Google Maps label
You can specify a location using latitude and longitude coordinates as well:
<a href=” Summer Retreat</a>
c07.indd 168c07.indd 168 12/7/07 2:53:46 PM12/7/07 2:53:46 PM
Chapter 7: Integrating with iPhone Services
169
To get directions, use the
saddr=
parameter to indicate the starting address and
daddr=
parameter to
specify the destination address, as shown in the following example:
<a href=” />+Boston,+MA”>Directions To Office</a>
Figure 7-11 displays the map view when this link is clicked.
Figure 7-11: Programming driving directions
Google Maps on its public Web site has an extensive set of parameters. However, except where noted
previously, none of these are supported at this time. You cannot, for example, use the
t=
parameter to
specify the Satellite map, the
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>
Next, going back to cui.css, four new styles need to be defined:
.rowCuiAddressBox {
position: relative;

min-height: 24px;
border-bottom: 1px solid #999999;
-webkit-border-radius: 0;
text-align: left;
}
.rowCuiAddressBox > p.cui {
box-sizing: border-box;
margin: 0;
border: none;
text-align: left;
padding: 2px 10px 0 80px;
height: 30px;
background: none;
font-weight: bold;
}
fieldset > .rowCuiAddressBox:first-child {
padding-top: 12px;
border-bottom: none !important;
}
fieldset > .rowCuiAddressBox:last-child {
min-height: 25px;
text-align: left;
border-bottom: none !important;
}
c07.indd 170c07.indd 170 12/7/07 2:53:47 PM12/7/07 2:53:47 PM
Chapter 7: Integrating with iPhone Services
171
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=” To
Office</a>
</div>
<div class=”row”>
<a class=”cuiServiceButton” target=”_self”
href=” />+Boston,+MA”>Directions To Office</a>

</div>
</fieldset>
These two links are assigned to the
cuiServiceButton
class. The first link displays a map of the
specified address in Boston, while the second link provides driving directions between Holden, MA
and the Boston address. Once again, to get around the way iUI handles events in iui.jss, you need to
specify the
target=”_self”
parameter.
Back over in cui.css, one new style needs to be added:
.cuiServiceButton {
display: block;
margin: 0;
border: none;
padding: 12px 10px 0 0px;
(continued)
c07.indd 171c07.indd 171 12/7/07 2:53:47 PM12/7/07 2:53:47 PM