How to get the name of the city from the point of latitude and longitude?

Is there a way to get the city name from latitude and longitude using google maps for javascript?

If I could see an example?

+76
javascript google-maps latitude-longitude geocoding
Jul 01 2018-11-11T00:
source share
8 answers
+108
Jul 01 2018-11-11T00:
source share
— -

Here is a complete example:

<!DOCTYPE html> <html> <head> <title>Geolocation API with Google Maps API</title> <meta charset="UTF-8" /> </head> <body> <script> function displayLocation(latitude,longitude){ var request = new XMLHttpRequest(); var method = 'GET'; var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+','+longitude+'&sensor=true'; var async = true; request.open(method, url, async); request.onreadystatechange = function(){ if(request.readyState == 4 && request.status == 200){ var data = JSON.parse(request.responseText); var address = data.results[0]; document.write(address.formatted_address); } }; request.send(); }; var successCallback = function(position){ var x = position.coords.latitude; var y = position.coords.longitude; displayLocation(x,y); }; var errorCallback = function(error){ var errorMessage = 'Unknown error'; switch(error.code) { case 1: errorMessage = 'Permission denied'; break; case 2: errorMessage = 'Position unavailable'; break; case 3: errorMessage = 'Timeout'; break; } document.write(errorMessage); }; var options = { enableHighAccuracy: true, timeout: 1000, maximumAge: 0 }; navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options); </script> </body> </html> 
+25
Jan 06 '13 at 20:21
source share

Here is a modern solution using a promise:

 function getAddress (latitude, longitude) { return new Promise(function (resolve, reject) { var request = new XMLHttpRequest(); var method = 'GET'; var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + ',' + longitude + '&sensor=true'; var async = true; request.open(method, url, async); request.onreadystatechange = function () { if (request.readyState == 4) { if (request.status == 200) { var data = JSON.parse(request.responseText); var address = data.results[0]; resolve(address); } else { reject(request.status); } } }; request.send(); }); }; 

And name it as follows:

 getAddress(lat, lon).then(console.log).catch(console.error); 

The promise returns the address object in 'then' or the error status code in 'catch'

+4
Dec 22 '16 at 4:57
source share

Here is the latest example of the Google geocoding web service

https://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&key=YOUR_API_KEY

Just change YOUR_API_KEY to the API key you get from the Google Geocoding API

P / S: The geocoding API is located in the Places section , not the maps ;)

+4
Nov 02 '18 at 4:43
source share

The following code works fine to get the city name (using the Google Map geography API ):

HTML

 <p><button onclick="getLocation()">Get My Location</button></p> <p id="demo"></p> <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script> 

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){ lat=position.coords.latitude; lon=position.coords.longitude; displayLocation(lat,lon); } 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; } } function displayLocation(latitude,longitude){ var geocoder; geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(latitude, longitude); geocoder.geocode( {'latLng': latlng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { var add= results[0].formatted_address ; var value=add.split(","); count=value.length; country=value[count-1]; state=value[count-2]; city=value[count-3]; x.innerHTML = "city name is: " + city; } else { x.innerHTML = "address not found"; } } else { x.innerHTML = "Geocoder failed due to: " + status; } } ); } 
+2
May 01 '17 at 7:38
source share

In the node.js file, we can use the npm -geocoder module to get the address from lat, lng.,

geo.js

 var NodeGeocoder = require('node-geocoder'); var options = { provider: 'google', httpAdapter: 'https', // Default apiKey: ' ', // for Mapquest, OpenCage, Google Premier formatter: 'json' // 'gpx', 'string', ... }; var geocoder = NodeGeocoder(options); geocoder.reverse({lat:28.5967439, lon:77.3285038}, function(err, res) { console.log(res); }); 

exit:

geo.js node

 [ { formattedAddress: 'C-85B, C Block, Sector 8, Noida, Uttar Pradesh 201301, India', latitude: 28.5967439, longitude: 77.3285038, extra: { googlePlaceId: 'ChIJkTdx9vzkDDkRx6LVvtz1Rhk', confidence: 1, premise: 'C-85B', subpremise: null, neighborhood: 'C Block', establishment: null }, administrativeLevels: { level2long: 'Gautam Buddh Nagar', level2short: 'Gautam Buddh Nagar', level1long: 'Uttar Pradesh', level1short: 'UP' }, city: 'Noida', country: 'India', countryCode: 'IN', zipcode: '201301', provider: 'google' } ] 
+2
Feb 20 '18 at 10:18
source share

Same as @Sanchit Gupta.

in this part

 if (results[0]) { var add= results[0].formatted_address ; var value=add.split(","); count=value.length; country=value[count-1]; state=value[count-2]; city=value[count-3]; x.innerHTML = "city name is: " + city; } 

just console the array of results

 if (results[0]) { console.log(results[0]); // choose from console whatever you need. var city = results[0].address_components[3].short_name; x.innerHTML = "city name is: " + city; } 
0
Jan 03 '18 at 8:54
source share

You can do it with pure PHP and Google Geocode API

 /* * * @param latlong (String) is Latitude and Longitude with , as separator for example "21.3724002,39.8016229" **/ function getCityNameByLatitudeLongitude($latlong) { $APIKEY = "AIzaXXXXXXXXXXXXXXXXXXXXXXXXXXX"; // Replace this with your google maps api key $googleMapsUrl = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" . $latlong . "&language=ar&key=" . $APIKEY; $response = file_get_contents($googleMapsUrl); $response = json_decode($response, true); $results = $response["results"]; $addressComponents = $results[0]["address_components"]; $cityName = ""; foreach ($addressComponents as $component) { // echo $component; $types = $component["types"]; if (in_array("locality", $types) && in_array("political", $types)) { $cityName = $component["long_name"]; } } if ($cityName == "") { echo "Failed to get CityName"; } else { echo $cityName; } } 
0
Apr 30 '19 at 7:34
source share



All Articles