Neil Crosby built a simple geolocation app called beernear.me over a weekend to learn about geolocation. The app uses the navigator.geolocation API to get the user's location with their permission. It translates the latitude and longitude coordinates into an address using the Google Local Search API. A static Google map is also displayed with a custom marker showing the user's location to reduce load on mobile devices. The app then searches for nearby beer and displays locations to the user.

1. &Beer
GeoLocation
@NeilCrosby

2. I’m Neil Crosby
(everywhere)

3. I work for
the BBC
http://www.flickr.com/photos/captaintim/3117409726/

4. On the homepage

5. I did the location stuff

6. But that’s boring

7. There’s
no beer
http://www.flickr.com/photos/mehan/3979975563/

8. And no
geolocation
http://www.flickr.com/photos/irisheyes/17560846/

9. What will I talk about?
Building beernear.me
“A simple weekend project
to learn about geolocation”

10. So?
• Location finding using navigator.geolocation
• Translating lat/lon to an address
• Static google maps
http://www.flickr.com/photos/yersinia/2051806493/

11. navigator.geolocation
support
• Firefox 3.5+
• Mobile Safari
• Chrome(ish)

12. Other APIs are available
Geode
(Firefox 3.1)
Loki (Skyhook
plugin)
Google Gears
http://www.flickr.com/photos/st3f4n/4482211416/

13. geolocation
if (navigator.geolocation) {
// do geolocation
} else {
// say sorry to the user
}
http://www.flickr.com/photos/fweez/278017185/

14. Find the user’s location
nav….geo….getCurrentPosition(
foundLocationFunc,
noLocationFunc,
{
enableHighAccuracy: true,
maximumAge: 120000
}
);
http://www.flickr.com/photos/clevergrrl/218312595/

15. Keep finding the user
nav….geo….watchPosition(
foundLocationFunc,
noLocationFunc,
{
enableHighAccuracy: true,
maximumAge: 120000
}
);
http://www.flickr.com/photos/pierrickblons/4496055947/

16. You’ve got a location!
http://dev.w3.org/geo/api/spec-source.html#position_interface
function
foundLocationFunc(position) {
// position.coords.latitude
// position.coords.longitude
// position.coords.accuracy
// and more…
}
http://www.flickr.com/photos/merlijnhoek/2789604490/

17. • But we only know a lat/lon.
• Where is the user really?
http://www.flickr.com/photos/ancawonka/116484666/

18. Getting an address
http://ajax.googleapis.com
/ajax/services/search/local
?v=1.0
&q=lat,lon
&key=yourkey
http://www.flickr.com/photos/csessums/4415113131/

19. Blob of location data
{"responseData": {"results":[{
…
"title":"Kelly Langley…",
"streetAddress":"Cowley Rd,
Cavendish House…",
"city":"Cambridge",
…
}]}}
http://www.flickr.com/photos/locator/948390609/

20. Awesome!
So we can tell the user
where they are.
How about a static
map? http://www.flickr.com/photos/clintjcl/3657971496/

21. Why a static map?
Reduced load for iPhone users.
http://www.flickr.com/photos/petereed/496392956/

22. Getting a static map
http://maps.google.com/maps/
api/staticmap
?sensor=true
&size=320x300&zoom=15
&maptype=roadmap
&mobile=true
&center=lat,lon
http://www.flickr.com/photos/manitobamaps/2340939496/

23. Yay! A Map!

24. Custom markers
markers=
icon:http%3A%2F%2Fbeernear.me
%2Fimg.png
|shadow:false
|52.2282962,0.1537945
|52.134152,-0.486364
http://www.flickr.com/photos/denisgiles/4291494985/

25. Put it all
together

26. First, the iPhone asks for
permission because we used
getCurrentPosition

27. We say “thanks for sharing”
because getCurrentPosition
returned successfully.

28. Send lat/lon to google.
Translate to address.

29. Then accuracy improves and
we do the same again.

30. Click through.
We have beer!

31. Where’s the beer?
There’s the beer!

32. Further Reading
• W3 geolocation documentation
• Google Static Maps API
• Google Local Search API
• My blog - The Code Train
http://www.flickr.com/photos/trucolorsfly/352573802/

33. I’ve been @NeilCrosby