HTML and CSS Reference
In-Depth Information
users are
geography savants
, the values (35.046872, -90.024971) probably mean far
less to you than 3734 Elvis Presley Blvd, Memphis, TN.
Luckily, there are many great web services out there that will translate latitude/longi-
tude coordinates into information far more transparent and valuable to humans: ad-
dresses, street maps, weather data, and more. Google Maps has a
set of APIs availa-
ble
for obtaining location data and embedding maps right in your HTML documents,
and in the next section, we'll query the
GeoNames
database to add real-time geo-
graphical data to a work of fiction.
A Geolocated Tale
Wouldn't it be great if authors could tailor their short stories, novels, and poems to the
hometown, state, and country of each and every one of their readers? Instead of
The
Merchant of Venice
, you could have
The Merchant of Dallas
, or
The Merchant of Yonk-
ers
. Whether you find the idea enthralling or a bit appalling, the Geolocation API makes
it possible.
To illustrate what's feasible on a smaller scale, we'll take the introduction to a short
story, and geolocate it with details about the reader's current location. We'll start with
some skeleton paragraphs that include placeholders for street address, city name, and
current temperature—styled in bold red for emphasis.
Example 2-1
shows the HTML,
and
Figure 2-1
shows it displayed in Safari for Mac:
Example 2-1. HTML for our story skeleton
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>A Geolocated Tale</title>
<script src="modernizr-1.6.min.js"></script>
<script src="geolocation-story.js"></script>
<script src="jquery-1.6.2.min.js"></script>
<style media="screen" type="text/css">
body {
margin: 10px 5px 10px 5px;
}
em {
font-weight: bold;
font-style: normal;
color: red;
}
</style>
</head>
<body>
<h1>A Geolocated Tale</h1>
<p>It was your typical <em id="weather_temp">LOADING
TEMPERATURE</em>°F day in <em id="city">LOADING CITY NAME</em> when
