<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>maxheapsize.com &#187; browser</title>
	<atom:link href="http://maxheapsize.com/tag/browser/feed/" rel="self" type="application/rss+xml" />
	<link>http://maxheapsize.com</link>
	<description>Oliver Wehrens on Programming and Agile</description>
	<lastBuildDate>Tue, 14 Jun 2011 20:41:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>Getting the Browsers GeoLocation with HTML 5</title>
		<link>http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/</link>
		<comments>http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/#comments</comments>
		<pubDate>Sat, 11 Apr 2009 08:00:23 +0000</pubDate>
		<dc:creator>Oliver Wehrens</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[geolocation]]></category>
		<category><![CDATA[html 5]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[LBS]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[safari]]></category>

		<guid isPermaLink="false">http://maxheapsize.com/?p=200</guid>
		<description><![CDATA[Until now it was almost impossible to get the GeoLocation of a user browsing your site. You could try to use several services to more or less guess the current position. Most of the time they where using the IP address to tackle the problem. This was not very reliable when it came to mobile [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fmaxheapsize.com%2F2009%2F04%2F11%2Fgetting-the-browsers-geolocation-with-html-5%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fmaxheapsize.com%2F2009%2F04%2F11%2Fgetting-the-browsers-geolocation-with-html-5%2F&amp;source=owehrens&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>Until now it was almost impossible to get the <strong>GeoLocation</strong> of a user browsing your site. You could try to use several services to more or less guess the current position. Most of the time they where using the IP address to tackle the problem. This was <strong>not very reliable</strong> when it came to mobile devices. </p>
<p>Ever since the iPhone hit the market mobile adoption of the web grew exponentially. Google threw in Android and I&#8217;m sure some Windows Mobile phones do have GPS as well.  According to some talks at <a href="http://www.re-publica.de">re:publica 09</a> the big telco carriers such as T-Mobile and Vodafone see their <strong>future in the mobile (geolocation aware) web</strong>.</p>
<p>Even though these devices had the capabilities to get the current location,  website developers are still facing the problem that they can <strong>not access the positioning hardware of the phone</strong>. There was almost no way for (mobile) web developers to get the location of the user. There are some solution out there but you needed to install extra software which is not always possible on a phone. </p>
<p>Fortunately W3C is working on the <b><a href="http://dev.w3.org/html5/spec/Overview.html">HTML 5</a></b> standard which includes JavaScript <b>access to the <a href="http://dev.w3.org/geo/api/spec-source.html">browsers location</a></b> (at least I hope it will be included). The latest beta of <a href="http://en-us.www.mozilla.com/en-US/firefox/3.1b3/releasenotes/">Firefox 3.1 (beta3)</a> already supports that API.   If you don&#8217;t have a GPS system in your computer you can install an <a href="https://addons.mozilla.org/en-US/firefox/addon/8420 ">addon</a> to set your location. Rumors has it that Apple will release the upcoming <strong>iPhone 3.0</strong> OS with a location aware browser and Google will do the same with one of the next updates of <strong>Android</strong>.</p>
<p>To test that I wrote a small <a href="http://maxheapsize.com/static/html5geolocationdemo.html">geolocation aware demo webpage</a> with some JavaScript to pull out the information. If you are accessing it with Firefox 3.1b3+ (plugin installed and configured with your position) you will be prompted for unveiling your location to the website. If you do so it will show you your current position on the map and print out the address. </p>
<div class="wp-caption alignnone" style="width: 500px"><img alt="Allow access to the browsers GeoLocation" src="http://maxheapsize.com/static/html5geolocation01.jpg" title="Allow access to the browsers GeoLocation" width="490" height="482" /><p class="wp-caption-text">Allow access to the browsers GeoLocation</p></div>
<div class="wp-caption alignnone" style="width: 500px"><img alt="Showing the GeoLocation of the Browser" src="http://maxheapsize.com/static/html5geolocation02.jpg" title="Showing the GeoLocation of the Browser" width="490" height="527" /><p class="wp-caption-text">Showing the GeoLocation of the Browser</p></div>
<p>To access this information all you need to do is:</p>
<pre class="brush: jscript; title: ;">
    function showMap(position) {
      // Show a map centered at
      // (position.coords.latitude, position.coords.longitude).
    }
    // One-shot position request.
    navigator.geolocation.getCurrentPosition(showMap);
</pre>
<p>Once this feature is widely available in mobile browsers (I do hope for this summer) my bet is that we will see a whole bunch of websites doing all sort of crazy things with these information. I&#8217;m a big Location Based Services (LBS) fan and I can&#8217;t wait to see people taking advantage of this.</p>
<p> <strong>Update</strong> Firefox 3.5.x uses Google&#8217;s Geolocation service if no other way can be used. This is halfway accurate. It gathers information about nearby wireless access points and your computerâ€šÃ„Ã´s IP address. No more plugin needed.</p>
<div class="google_plusone_widget"><g:plusone 
      count="true" href="http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/" size="medium"></g:plusone></div><!-- Social Bookmarks BEGIN -->
<div class="social_bookmark">
<br />
<div class="d">
<br />
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://del.icio.us/post?url=http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/&amp;title=Getting+the+Browsers+GeoLocation+with+HTML+5" rel="nofollow" title="Add to&nbsp;Del.icio.us"><img class="social_img" src="http://maxheapsize.com/wp-content/plugins/social-bookmarks/images/delicious.png" title="Add to&nbsp;Del.icio.us" alt="Add to&nbsp;Del.icio.us" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://digg.com/submit?phase=2&amp;url=http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/&amp;title=Getting+the+Browsers+GeoLocation+with+HTML+5" rel="nofollow" title="Add to&nbsp;digg"><img class="social_img" src="http://maxheapsize.com/wp-content/plugins/social-bookmarks/images/digg.png" title="Add to&nbsp;digg" alt="Add to&nbsp;digg" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.dzone.com/links/add.html?description=Getting+the+Browsers+GeoLocation+with+HTML+5&amp;url=http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/&amp;title=Getting+the+Browsers+GeoLocation+with+HTML+5" rel="nofollow" title="Add to&nbsp;DZone"><img class="social_img" src="http://maxheapsize.com/wp-content/plugins/social-bookmarks/images/dzone.png" title="Add to&nbsp;DZone" alt="Add to&nbsp;DZone" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.facebook.com/sharer.php?u=http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/" rel="nofollow" title="Add to&nbsp;Facebook"><img class="social_img" src="http://maxheapsize.com/wp-content/plugins/social-bookmarks/images/facebook.png" title="Add to&nbsp;Facebook" alt="Add to&nbsp;Facebook" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/&amp;title=Getting+the+Browsers+GeoLocation+with+HTML+5" rel="nofollow" title="Add to&nbsp;Google Bookmarks"><img class="social_img" src="http://maxheapsize.com/wp-content/plugins/social-bookmarks/images/google.png" title="Add to&nbsp;Google Bookmarks" alt="Add to&nbsp;Google Bookmarks" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.mister-wong.com/index.php?action=addurl&amp;bm_url=http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/&amp;bm_description=Getting+the+Browsers+GeoLocation+with+HTML+5" rel="nofollow" title="Add to&nbsp;Mister Wong"><img class="social_img" src="http://maxheapsize.com/wp-content/plugins/social-bookmarks/images/misterwong.png" title="Add to&nbsp;Mister Wong" alt="Add to&nbsp;Mister Wong" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://reddit.com/submit?url=http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/&amp;title=Getting+the+Browsers+GeoLocation+with+HTML+5" rel="nofollow" title="Add to&nbsp;reddit"><img class="social_img" src="http://maxheapsize.com/wp-content/plugins/social-bookmarks/images/reddit.png" title="Add to&nbsp;reddit" alt="Add to&nbsp;reddit" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.stumbleupon.com/submit.php?url=http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/&amp;title=Getting+the+Browsers+GeoLocation+with+HTML+5" rel="nofollow" title="Add to&nbsp;Stumble Upon"><img class="social_img" src="http://maxheapsize.com/wp-content/plugins/social-bookmarks/images/stumbleupon.png" title="Add to&nbsp;Stumble Upon" alt="Add to&nbsp;Stumble Upon" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.sphere.com/sphereit/http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/" rel="nofollow" title="Add to&nbsp;SphereIt"><img class="social_img" src="http://maxheapsize.com/wp-content/plugins/social-bookmarks/images/sphereit.png" title="Add to&nbsp;SphereIt" alt="Add to&nbsp;SphereIt" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.spurl.net/spurl.php?url=http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/&amp;title=Getting+the+Browsers+GeoLocation+with+HTML+5" rel="nofollow" title="Add to&nbsp;Spurl"><img class="social_img" src="http://maxheapsize.com/wp-content/plugins/social-bookmarks/images/spurl.png" title="Add to&nbsp;Spurl" alt="Add to&nbsp;Spurl" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.technorati.com/faves?add=http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/" rel="nofollow" title="Add to&nbsp;Technorati"><img class="social_img" src="http://maxheapsize.com/wp-content/plugins/social-bookmarks/images/technorati.png" title="Add to&nbsp;Technorati" alt="Add to&nbsp;Technorati" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://twitter.com/home/?status=Check+out+Getting+the+Browsers+GeoLocation+with+HTML+5+@+http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/" rel="nofollow" title="Add to&nbsp;Twitter"><img class="social_img" src="http://maxheapsize.com/wp-content/plugins/social-bookmarks/images/twitter.png" title="Add to&nbsp;Twitter" alt="Add to&nbsp;Twitter" /></a>
<br />
</div>
</div>
<!-- Social Bookmarks END -->
]]></content:encoded>
			<wfw:commentRss>http://maxheapsize.com/2009/04/11/getting-the-browsers-geolocation-with-html-5/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
	</channel>
</rss>

