HTML and CSS Reference
In-Depth Information
others that you're paying for Internet service.) In my current use case, using Comcast's Internet service, my IP address
is assuming me to be around the Philadelphia area, and this is on WiFi, which is pretty good considering I'm just
outside the city; however, I've seen in some cases where IP lookup is not even accurate about the state. It progressively
gets worse when users are on cell carrier networks. So, IP location lookup is pretty unpredictable and unreliable for
truly accurate uses, especially for mobile.
Luckily, with the new Geolocation API, you can grab the actual latitude and longitude of a user, which proves
to be a much speedier and accurate tool than a costly (seldom reliable) lookup service. I mention the word
costly
because some of these lookup tools aren't free and because they take requests to remote servers and lookup
databases to gather a user's approximate location which in turn end up being costly for timing. The Geolocation
API geographically locates a user (with opt-in permission) through the browser natively. I stress “with permission”
because once you attempt to detect a user, the browser's initial default action will prompt an alert to the user stating
that the content's domain is asking to access their location. This prompt is a security measure employed by all
browsers and devices. Figure
11-11
demonstrates how this appears in Google's Chrome browser.
Figure 11-11.
The Geolocation prompt in Google's Chrome browser
Figure
11-12
shows it on an iDevice's mobile Safari browser.
Figure 11-12.
The Geolocation prompt on mobile Safari
If the user selects, allows, denies, or simply waits too long to reply, the developer can then handle how the
user responds, by detecting for
PERMISSION_DENIED
,
POSITION_UNAVAILABLE
, or
TIMEOUT
based on the course of
action performed. In any event taken, ensure that your ad creative is intelligent enough to adapt to the various
user inputs, because not everyone will allow location-based services. Listing 11-11 shows how to work with
Geolocation using JavaScript.
Listing 11-11.
Geolocation API Example
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<body>
<header>
<h1>geolocation</h1>
<div id="coords"></div>
</header>
<script>
function success(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
