Geolocation in web browsers to find location & Google Maps Route examples

More and more services around us focus on where we physically are located at the moment, and how we can be assisted in the best fashion depending on that. Today I’d like to introduce the geolocation possibilities we developers have, and also play around a little with Google maps.

Introducing geolocation

Geolocation, i.e. finding out where someone is located, is extremely simple for a web developer. This is the code to accomplish that:

1.// Check for geolocation support

2.if (navigator.geolocation) {

3.// Use method getCurrentPosition to get coordinates

4.navigator.geolocation.getCurrentPosition(function (position) {

5.// Access them accordingly

6.alert(position.coords.latitude + ", " + position.coords.longitude);

7.});

8.}

That’s it! Pretty simple, right?
What happens when you utilize this code is that the web browser will show a notification to the end user, ask them if they want to share their location or not, and offer them an option to remember that choice for future preference. In Firefox, it looks like this:

Web browser support

• Firefox 3.5+
• Firefox on Mobile (aka Fennec)
• Safari on the iPhone (not the desktop)
• Android web browser

It should also be noted that at the time of writing, a beta of Google Chrome supports it, and I feel certain the other web browser vendors will shortly follow suit.

Not a part of HTML5

Even though it is bundled with other features, let’s just clear out a common misunderstanding: geolocation is not a part of the HTML5 specification, but rather comes from the Geolocation API Specification. Not that it really matters, though. Geolocation is new, cool and very useful, and if you want to bundle it with HTML5 when you talk about (just like most people did using the word AJAX to sell any sort of JavaScripting), be my guest.

Using geolocation and showing current location

So, naturally, with this newfound knowledge, we want to utilize it with Google Maps and offer users an option to see where they are located on a map. The code to do this (with fallbacks if the user declines, or has a web browser that doesn’t support geolocation) looks like this:

HTML

1.<div id="map"></div>

JavaScript

01./*

02.A Google Maps API key can be attained at

03.http://code.google.com/apis/maps/signup.html

04.*/ 

05.<script src="http://www.google.com/jsapi?key=[Your Google Maps API key]"></script>

06.<script>

07.(function () {

08.google.load("maps", "2");

09.google.setOnLoadCallback(function () {

10.// Create map

11.var map = new google.maps.Map2(document.getElementById("map")),

12.markerText = "<h2>You are here</h2><p>Nice with geolocation, ain't it?</p>",

13.markOutLocation = function (lat, long) {

14.var latLong = new google.maps.LatLng(lat, long),

15.marker = new google.maps.Marker(latLong);

16.map.setCenter(latLong, 13);

17.map.addOverlay(marker);

18.marker.openInfoWindow(markerText);

19.google.maps.Event.addListener(marker, "click", function () {

20.marker.openInfoWindow(markerText);

21.});

22.};

23.map.setUIToDefault();

24. 

25.// Check for geolocation support   

26.if (navigator.geolocation) {

27.// Get current position

28.navigator.geolocation.getCurrentPosition(function (position) {

29.// Success!

30.markOutLocation(position.coords.latitude, position.coords.longitude);

31.},

32.function () {

33.// Gelocation fallback: Defaults to Stockholm, Sweden

34.markerText = "<p>Please accept geolocation for me to be able to find you. <br>I've put you in Stockholm for now.</p>";

35.markOutLocation(59.3325215, 18.0643818);

36.}

37.);

38.}

39.else {

40.// No geolocation fallback: Defaults to Eeaster Island, Chile

41.markerText = "<p>No location support. Try Easter Island for now.</p>";

42.markOutLocation(-27.121192, -109.366424);

43.}

44.});

45.})();

46.</script>

You can see this example in action an try it out at http://robertnyman.com/html5/geolocation/current-location.html.

Using geolocation and showing travel route and directions

Google are working on Google Maps JavaScript API V3, which is available as a Labs project. The cool thing about this, apart from very good performance, is the option to show routes between two points, and also displaying a list of directions.

They way to do that looks like this in code (like above examples, contains fallbacks):

HTML

1.<div id="map"></div>

2.<div id="map-directions"></div>

01.<script type="text/javascript" src="http://maps.google.se/maps/api/js?sensor=false"></script>

02.<script>

03.(function () {

04.var directionsService = new google.maps.DirectionsService(),

05.directionsDisplay = new google.maps.DirectionsRenderer(),

06.createMap = function (start) {

07.var travel = {

08.origin : (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,

09.destination : "Alexanderplatz, Berlin",

10.travelMode : google.maps.DirectionsTravelMode.DRIVING

11.// Exchanging DRIVING to WALKING above can prove quite amusing <img src="http://robertnyman.com/wp-includes/images/smilies/simple-smile.png" alt=":-)" class="wp-smiley" style="height: 1em; max-height: 1em;">

12.},

13.mapOptions = {

14.zoom: 10,

15.// Default view: downtown Stockholm

16.center : new google.maps.LatLng(59.3325215, 18.0643818),

17.mapTypeId: google.maps.MapTypeId.ROADMAP

18.};

19. 

20.map = new google.maps.Map(document.getElementById("map"), mapOptions);

21.directionsDisplay.setMap(map);

22.directionsDisplay.setPanel(document.getElementById("map-directions"));

23.directionsService.route(travel, function(result, status) {

24.if (status === google.maps.DirectionsStatus.OK) {

25.directionsDisplay.setDirections(result);

26.}

27.});

28.};

29. 

30.// Check for geolocation support   

31.if (navigator.geolocation) {

32.navigator.geolocation.getCurrentPosition(function (position) {

33.// Success!

34.createMap({

35.coords : true,

36.lat : position.coords.latitude,

37.lng : position.coords.longitude

38.});

39.},

40.function () {

41.// Gelocation fallback: Defaults to Stockholm, Sweden

42.createMap({

43.coords : false,

44.address : "Sveavägen, Stockholm"

45.});

46.}

47.);

48.}

49.else {

50.// No geolocation fallback: Defaults to Lisbon, Portugal

51.createMap({

52.coords : false,

53.address : "Lisbon, Portugal"

54.});

55.}

56.})();

57.</script>

This example is also available for viewing at http://robertnyman.com/html5/geolocation/current-location-and-directions.html

Maps are cool

I’ve always found maps very cool, and with all this new geolocation support, we can create some awesome services. Start playing with it now.