Click here to Skip to main content
14,298,693 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi,

I'm doing some research on personalization on the web and I've stumbled across something I can't figure out how it's working. I'd appreciate if anyone could point me in some directions as to what I should be researching.

The site is [removed], and the intro has a personalised message. This is what I'd like to achieve, displaying the users location and device.

Anyone has any tips please?

Thanks,
Sal

What I have tried:

So far it seems with geolocation I'm only able to get coordinates.

<script>
          $('#location-button').click(function(){
        
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position){
                  console.log(position);
                  $.get( "http://maps.googleapis.com/maps/api/geocode/json?latlng="+ position.coords.latitude + "," + position.coords.longitude +"&sensor=false", function(data) {
                    console.log(data);
                  })
                  var img = new Image();
                  img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + position.coords.latitude + "," + position.coords.longitude + "&zoom=13&size=800x400&sensor=false";
                  $('#output').html(img);
                });
                
            }
          });
  </script>
Posted
Updated 10-Sep-19 4:17am
v8

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

What I want... displaying the users location and device.
What I've done... So far it seems with geolocation I'm only able to get coordinates.

This is a good start. So it seems to me that all you need to know now is how to get the device type. This is not something that is built into JavaScript; but JS does have the ability to read the User-Agent (UA) and parse that into usable information. This is the same as the implementations 20 years ago to figure out if people were using Netscape Navigator or Internet Explorer.

The best thing is to read through the following resources, and review the samples to see how they work
Detect Mobile Device with Javascript | Red Stapler[^]
mobile-detect.js | Device detection (phone, tablet, desktop, mobile grade, os, versions)[^]

I didn't see any samples here, but have seen it recommended before:
http://detectmobilebrowsers.com/[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100