Question

I'm trying to learn using HTML 5 Geolocation API and while looking for samples, I found this nice example of using this API http://www.w3schools.com/html/html5_geolocation.asp

But the question is this, when I run the sumple on any laptops, it works. but while running on desktop computers, it doesn't;

Both the laptops and PCs are on the same network (same public IP address), and both have the latest versions of Firefox and Chrome browsers.

What else is needed for this API to work? what's in my laptop, which is not available on PCs?

Was it helpful?

Solution

You can use an other API to locate user if it doesn't work. (NOTE: W3School script didn't worked on my computer)

Here are some API :

Maxmind.com

Maxmind.com plugin (already installed on geoplugin.net) :

http://www.geoplugin.net/json.gp?ip=8.8.8.8&jsoncallback=callback

You can use it JSONP:

<script type="text/javascript" src="http://l2.io/ip.js?var=userip"></script>
<script scr="http://www.geoplugin.net/json.gp?ip="+userip+"&jsoncallback=callback"></script>

Or install your own Maxmind.com plugin :

http://dev.maxmind.com/geoip/legacy/geolite/

NOTE: You can get the IP via a PHP file and an AJAX request like here

https://stackoverflow.com/questions/1641868/how-to-get-client-ip-address-using-jquery

Google API

You will need a google API key, every informations here:

http://www.adammcfarland.com/2009/11/19/simple-ip-geolocation-using-javascript-and-the-google-ajax-search-api/

OTHER TIPS

Could you please provide more information? Whilst it's great to know what browser is being used and it's useful to know

  1. Are the Laptops on WiFi, Ethernet or 3G/4G Tether?
  2. Are the PCs on WiFi, Ethernet or 3G/4G Tether?
  3. What does "it doesn't work" mean? Is the site returning nothing? Or is the location simply wrong?
  4. Is Location sharing enabled/disabled on the PC's? See: https://support.google.com/chrome/answer/142065?hl=en

Here is a helpful note from the W3C GeoLocation API

The Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude. The API itself is agnostic of the underlying location information sources. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device's actual location.

The key thing to note from my experience, is that Mobile/Laptop devices on 3G/4G or WiFi tend to give better results, but again as the specification explains, there is no guarantee on what is returned.

FYI I ran the HTML5 GeoLocation demo in on my iMac (Ethernet) and it returned the exact centre of "Sydney" as the location even though I'm not near there.

I used the same script from w3schools and given in the following link: http://www.nirt.in/geolocate.htm

The locations shown is not the location of the laptop or location of the PC. The location is the location of IP address provided by the ISP provider. If you use smartphones the location will be nearer to same since the IP is the location of the nearest cellphone tower. If your smartphone is provided with GPS you can use Watchposition instead of getcurrentposition then you will get exact location of your smartphone.

The code is

<html>
<body>
<div id="mapholder"></div>
<p id="locate">location:</p>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  var latlon=position.coords.latitude+","+position.coords.longitude;

  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=15&size=600x600&sensor=false";
  document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
document.getElementById("locate").innerHTML="latlon="+latlon;
  }

function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
getLocation();
</script>
<IMG SRC="rs.gif" style="position:absolute;left:305;top:290;z-index:10">

</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top