Get city name using geolocation

Question

I managed to get the user s latitude and longitude using HTML-based geolocation      Check if browser supports W3C Geolocation API if  navigator geolocation        navigator geolocation getCurrentPosition successFunction  errorFunction        Get latitude and longitude  function successFunction position        var lat   position coords latitude      var long   position coords longitude      I want to display the city name  it seems the only way to get it is to use a reverse geolocation API  I read Google s documentation for reverse geolocation but I don t know how to get the output on my site   I don t know how to go use this   http   maps googleapis com maps api geocode json latlng   lat     long   amp sensor true  to display the city name on the page   How can I achieve this

User · Answer

As  PirateApp mentioned in his comment  it s explicitly against Google s Maps API Licensing to use the Maps API as you intend    You have a number of alternatives  including downloading a Geoip database and querying it locally or using a third party API service  such as my service ipdata co   ipdata gives you the geolocation  organisation  currency  timezone  calling code  flag and Tor Exit Node status data from any IPv4 or IPv6 address   And is scalable with 10 global endpoints each able to handle  10 000 requests per second      This answer uses a  test  API Key that is very limited and only meant for testing a few calls  Signup for your own Free API Key and get up to 1500 requests daily for development     x000D   x000D    get  https   api ipdata co api-key test   function response    x000D        ip   html  IP      response ip   x000D        city   html response city          response region   x000D        response   html JSON stringify response  null  4    x000D      jsonp    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt h1 gt  lt a href  https   ipdata co  gt ipdata co lt  a gt  - IP geolocation API lt  h1 gt  x000D   x000D   lt div id  ip  gt  lt  div gt  x000D   lt div id  city  gt  lt  div gt  x000D   lt pre id  response  gt  lt  pre gt  x000D   x000D   x000D    The fiddle  https   jsfiddle net ipdata 6wtf0q4g 922

User · Answer

Alternatively you could use my service  https   astroip co  it is a new Geolocation API    get  quot https   api astroip co  api key 1725e47c-1486-4369-aaff-463cc9764026 quot   function response        console log response geo city  response geo country         AstroIP provides geolocation data together with security datapoints like proxy  TOR nodes and crawlers detection  The API also returns currency  timezones  ASN and company data  It is a pretty new api with an average response time of 40ms from multiple regions around the world  which positions it in the handful list of super fast Geolocation APIs available  Big free plan of up to 30 000 requests per month for free is available

User · Answer

After some searching and piecing together a couple of different solutions along with my own stuff  I came up with this function   function parse place place        var location            for  var ac   0  ac  lt  place address components length  ac                  var component   place address components ac            switch component types 0                         case  locality                   location  city     component long name                  break              case  administrative area level 1                   location  state     component long name                  break              case  country                   location  country     component long name                  break                        return location

User · Answer

Here is updated working version for me which will get City Town  It looks like some fields are modified in the json response  Referring previous answers for this questions    Thanks to Michal  amp  one more reference   Link   var geocoder   if  navigator geolocation      navigator geolocation getCurrentPosition successFunction  errorFunction        Get the latitude and the longitude  function successFunction position      var lat   position coords latitude    var lng   position coords longitude    codeLatLng lat  lng      function errorFunction       alert  Geocoder failed       function initialize       geocoder   new google maps Geocoder        function codeLatLng lat  lng      var latlng   new google maps LatLng lat  lng     geocoder geocode  latLng  latlng   function results  status        if  status    google maps GeocoderStatus OK          if  results 1             var arrAddress   results          console log results             each arrAddress  function i  address component              if  address component types 0      locality                 console log  City      address component address components 0  long name               itemLocality   address component address components 0  long name                                  else           alert  No results found                  else         alert  Geocoder failed due to      status

User · Answer

geolocator js can do that   I m the author    Getting City Name  Limited Address     geolocator locateByIP options  function  err  location        console log location address city         Getting Full Address Information  Example below will first try HTML5 Geolocation API to obtain the exact coordinates  If fails or rejected  it will fallback to Geo-IP look-up  Once it gets the coordinates  it will reverse-geocode the coordinates into an address   var options         enableHighAccuracy  true      fallbackToIP  true     fallback to IP if Geolocation fails or rejected     addressLookup  true    geolocator locate options  function  err  location        console log location address city         This uses Google APIs internally  for address lookup   So before this call  you should configure geolocator with your Google API key   geolocator config       language   en       google            version   3           key   YOUR-GOOGLE-API-KEY              Geolocator supports geo-location  via HTML5 or IP lookups   geocoding  address look-ups  reverse geocoding   distance  amp  durations  timezone information and a lot more features

User · Answer

You can use https   ip-api io  to get city Name  It supports IPv6   As a bonus it allows to check whether ip address is a tor node  public proxy or spammer    Javascript Code     document  ready function                  btnGetIpDetail   click function                  if      txtIP   val                            alert  IP address is reqired                    return false                              getJSON  http   ip-api io json         txtIP   val                     function  result                         alert  City Name      result city                       console log result                                              HTML Code   lt script src  https   code jquery com jquery-1 12 4 js  gt  lt  script gt   lt div gt       lt input type  text  id  txtIP    gt       lt button id  btnGetIpDetail  gt Get Location of IP lt  button gt   lt  div gt    JSON Output         ip    64 30 228 118        country code    US        country name    United States        region code    FL        region name    Florida        city    Fort Lauderdale        zip code    33309        time zone    America New York        latitude   26 1882       longitude   -80 1711       metro code   528       suspicious factors              is proxy   false           is tor node   false           is spam   false           is suspicious   false

User · Answer

Another approach to this is to use my service  http   ipinfo io  which returns the city  region and country name based on the user s current IP address  Here s a simple example     get  http   ipinfo io   function response        console log response city  response country       jsonp      Here s a more detailed JSFiddle example that also prints out the full response information  so you can see all of the available details  http   jsfiddle net zK5FN 2

User · Answer

x000D   x000D    ajax   x000D    url   https   geolocation-db com jsonp   x000D    jsonpCallback   callback   x000D    dataType   jsonp   x000D    success  function location    x000D          country   html location country name   x000D          state   html location state   x000D          city   html location city   x000D          latitude   html location latitude   x000D          longitude   html location longitude   x000D          ip   html location IPv4   x000D      x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div gt Country   lt span id  country  gt  lt  span gt  lt  div gt  x000D     lt div gt State   lt span id  state  gt  lt  span gt  lt  div gt  x000D       lt div gt City   lt span id  city  gt  lt  span gt  lt  div gt  x000D         lt div gt Latitude   lt span id  latitude  gt  lt  span gt  lt  div gt  x000D           lt div gt Longitude   lt span id  longitude  gt  lt  span gt  lt  div gt  x000D             lt div gt IP   lt span id  ip  gt  lt  span gt  lt  div gt  x000D   x000D   x000D    Using html5 geolocation requires user permission  In case you don t want this  go for an external locator like https   geolocation-db com IPv6 is supported  No restrictions and unlimited requests allowed     JSON  https   geolocation-db com json JSONP  https   geolocation-db com jsonp   Example  For a pure javascript example  without using jQuery  check out this answer

User · Answer

Here is another go at it    Adding more to the accepted answer possibly more comprehensive    of course switch -case will make it look for elegant   function parseGeoLocationResults result        const parsedResult          const  address components    result       for  var i   0  i  lt  address components length  i              for  var b   0  b  lt  address components i  types length  b                  if  address components i  types b      street number                       this is the object you are looking for                 parsedResult street number   address components i  long name                  break                            else if  address components i  types b      route                       this is the object you are looking for                 parsedResult street name   address components i  long name                  break                            else if  address components i  types b      sublocality level 1                       this is the object you are looking for                 parsedResult sublocality level 1   address components i  long name                  break                            else if  address components i  types b      sublocality level 2                       this is the object you are looking for                 parsedResult sublocality level 2   address components i  long name                  break                            else if  address components i  types b      sublocality level 3                       this is the object you are looking for                 parsedResult sublocality level 3   address components i  long name                  break                            else if  address components i  types b      neighborhood                       this is the object you are looking for                 parsedResult neighborhood   address components i  long name                  break                            else if  address components i  types b      locality                       this is the object you are looking for                 parsedResult city   address components i  long name                  break                            else if  address components i  types b      administrative area level 1                       this is the object you are looking for                 parsedResult state   address components i  long name                  break                             else if  address components i  types b      postal code                       this is the object you are looking for                 parsedResult zip   address components i  long name                  break                            else if  address components i  types b      country                       this is the object you are looking for                 parsedResult country   address components i  long name                  break                                    return parsedResult

User · Answer

Here s an easy function you can use to get it  I used axios to make the API request  but you can use anything else    async function getCountry lat  long      const   data    results       await axios get  https   maps googleapis com maps api geocode json latlng   lat    long  amp key   GOOGLE API KEY       const   address components     results 0      for  let i   0  i  lt  address components length  i          const   types  long name     address components i        if  types indexOf  country       -1  return long name

User · Answer

You would do something like that using Google API    Please note you must include the google maps library for this to work  Google geocoder returns a lot of address components so you must make an educated guess as to which one will have the city     administrative area level 1  is usually what you are looking for but sometimes locality is the city you are after    Anyhow - more details on google response types can be found here and here   Below is the code that should do the trick    lt  DOCTYPE html gt    lt html gt    lt head gt    lt meta name  viewport  content  initial-scale 1 0  user-scalable no   gt    lt meta http-equiv  content-type  content  text html  charset UTF-8   gt    lt title gt Reverse Geocoding lt  title gt     lt script type  text javascript  src  http   maps googleapis com maps api js sensor false  gt  lt  script gt    lt script type  text javascript  gt     var geocoder     if  navigator geolocation        navigator geolocation getCurrentPosition successFunction  errorFunction        Get the latitude and the longitude  function successFunction position        var lat   position coords latitude      var lng   position coords longitude      codeLatLng lat  lng     function errorFunction        alert  Geocoder failed         function initialize         geocoder   new google maps Geocoder              function codeLatLng lat  lng         var latlng   new google maps LatLng lat  lng       geocoder geocode   latLng   latlng   function results  status          if  status    google maps GeocoderStatus OK          console log results          if  results 1                formatted address          alert results 0  formatted address            find country name              for  var i 0  i lt results 0  address components length  i                  for  var b 0 b lt results 0  address components i  types length b                     there are different types that might hold a city admin area lvl 1 usually does in come cases looking for sublocality type will be more appropriate                 if  results 0  address components i  types b      administrative area level 1                           this is the object you are looking for                     city  results 0  address components i                       break                                                      city data         alert city short name         city long name              else             alert  No results found                      else           alert  Geocoder failed due to      status                        lt  script gt    lt  head gt    lt body onload  initialize    gt     lt  body gt    lt  html gt

User · Answer

You can get the name of the city  country  street name and other geodata using the Google Maps Geocoding API   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt  lt  title gt       lt script type  text javascript  src  https   code jquery com jquery-2 2 3 js  gt  lt  script gt   lt  head gt   lt body gt       lt script type  text javascript  gt          navigator geolocation getCurrentPosition success  error            function success position                console log position coords latitude              console log position coords longitude               var GEOCODING    https   maps googleapis com maps api geocode json latlng     position coords latitude     2C    position coords longitude     amp language en                  getJSON GEOCODING  done function location                    console log location                                     function error err                console log err                 lt  script gt   lt  body gt   lt  html gt    and to display this data on the page using jQuery   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt  lt  title gt       lt script type  text javascript  src  https   code jquery com jquery-2 2 3 js  gt  lt  script gt   lt  head gt   lt body gt        lt p gt Country   lt span id  country  gt  lt  span gt  lt  p gt       lt p gt State   lt span id  state  gt  lt  span gt  lt  p gt       lt p gt City   lt span id  city  gt  lt  span gt  lt  p gt       lt p gt Address   lt span id  address  gt  lt  span gt  lt  p gt        lt p gt Latitude   lt span id  latitude  gt  lt  span gt  lt  p gt       lt p gt Longitude   lt span id  longitude  gt  lt  span gt  lt  p gt        lt script type  text javascript  gt          navigator geolocation getCurrentPosition success  error            function success position                 var GEOCODING    https   maps googleapis com maps api geocode json latlng     position coords latitude     2C    position coords longitude     amp language en                  getJSON GEOCODING  done function location                        country   html location results 0  address components 5  long name                       state   html location results 0  address components 4  long name                       city   html location results 0  address components 2  long name                       address   html location results 0  formatted address                       latitude   html position coords latitude                       longitude   html position coords longitude                                      function error err                console log err                 lt  script gt   lt  body gt   lt  html gt

[javascript] Get city name using geolocation

Examples related to javascript

Examples related to html

Examples related to geolocation