Search code examples
jqueryhtmlinternet-explorer-8geolocationwebshim

Webshims, IE8, and Geolocation

I wanted multiple options for making geolocation work for our IE8 laptops and have investigated both the Google Chrome Frame (which works) and the jquery polyfill (which is what I am trying to get working). The website the example was taken from is webshims and I have verified that the mentioned demo page works in IE8, but I can't recreate the example for myself. This is my jsp:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Geolocation</title>
    <script src="<c:url value="/js/jquery-1.6.4.min.js"/>" type="text/javascript"></script>
    <script src="<c:url value="/js/modernizr-latest.js"/>" type="text/javascript"></script>
    <script src="<c:url value="/js/polyfiller.js"/>" type="text/javascript"></script>
    <script type="text/javascript">
      //http://afarkas.github.com/webshim/demos/demos/geolocation.html
      $.webshims.polyfill();
      navigator.geolocation.getCurrentPosition(function(pos){ $("#status").html("found you! latitude: "+ pos.coords.latitude +"/longitude: " + pos.coords.longitude); });
    </script>
  </head>
  <body>
    <p>Finding your location: <span id="status">checking...</span></p>
  </body>
</html>

It works in any browser where geolocation is natively supported, but the polyfill doesn't seem to be doing its job for IE8. I get the below error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; chromeframe/15.0.874.121; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Wed, 7 Dec 2011 17:48:06 UTC

Message: 'navigator.geolocation' is null or not an object Line: 13 Char: 7 Code: 0 URI: ../GeoLocation/jquery.action

Am I missing something to make this function properly?

Solution

  • You need to activate the polyfill first. See the example source that has the following script in it's head:

    $.webshims.setOptions('geolocation', {
            confirmText: '{location} wants to know your position. It is Ok to press Ok.'
        });
        //load all polyfill features
        //or load only a specific feature with $.webshims.polyfill('feature-name');
        $.webshims.polyfill();

    Update: This HTML page works just fine both in IE9, IE7 and Chrome

    <!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Geolocation</title>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/extras/modernizr-custom.js" type="text/javascript"></script>
    <script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/polyfiller.js" type="text/javascript"></script>
    <script type="text/javascript">
      //http://afarkas.github.com/webshim/demos/demos/geolocation.html
      $.webshims.setOptions('geolocation', {
            confirmText: '{location} wants to know your position. It is Ok to press Ok.'
        });
      $.webshims.polyfill();
      $(function(){
        navigator.geolocation.getCurrentPosition(function(pos){ $("#status").html("found you! latitude: "+ pos.coords.latitude +"/longitude: " + pos.coords.longitude); });
      });
    </script>
  </head>
  <body>
    <p>Finding your location: <span id="status">checking...</span></p>
  </body>
</html>

    Make sure to serve it using HTTPL// and not FILE://