Getting Geolocation's City Name

Question

I'm using HTML Geolocation in ASP.NET to get the location of a user. However I need to get the CITY Name (e.g.: Paris, Kuala Lampur, etc) instead of the Latitude and Logitude it traditionally outputs from the code below:

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false"></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;
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('mapholder')
    mapholder.style.height = '250px';
    mapholder.style.width = '500px';

    var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
    }

    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
    var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

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;
    }
}
</script>

</body>
</html>

I'm trying to show the location on a Label on the ASP page at Page_Load :)

this is more about google maps' API than asp.net, let alone C# — Timothy Groote, Mar 03 '15 at 09:16
i think you are looking for how to do reverse geocoding with google maps. if so, look here : https://developers.google.com/maps/documentation/javascript/geocoding#ReverseGeocoding — Timothy Groote, Mar 03 '15 at 09:19
You can see this answer https://stackoverflow.com/a/6798005/4541529 I think it will help you. — Rubel Miah, Jan 11 '19 at 11:41

score 0 · Answer 1 · answered Mar 03 '15 at 09:32

0

This is a reverse geocoding problem. You can use any reverse geocoding service, e.g. https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse

answered Mar 03 '15 at 09:32

Remigius Stalder

1,921
2
26
31

The result is actually in the field results[1].formatted_address and must probably be parsed. – Remigius Stalder Mar 03 '15 at 09:35
Okay that works if I have the Longi and Lat right.. is there a way to get the Longi and Lat in order to do this? Without having an address. – MWUser Mar 03 '15 at 09:53

Emmanuel Delay · Answer 2 · 2015-03-03T11:05:21.357

Does this do what you need?

<!DOCTYPE html>
<html>
<head>
  <style>
    #mapholder {
      height: 300px;
      width: 300px;
    }
  </style>
</head>
<body>
<p id="demo">Click the button to get your position.</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
var geocoder;  // this object will handle the position<->address conversion
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError); // , {maximumAge:60000, timeout:5000, enableHighAccuracy:true}
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon);
    // okay, now we have the position (as a google maps latLng object), 
    // now we send this position to geocoder
    // @see  https://developers.google.com/maps/documentation/javascript/geocoding
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({'latLng': latlon}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var city = getCity(results[0]);
        x.innerHTML = 'city: ' + city;
      }
    });

    mapholder = document.getElementById('mapholder');
    mapholder.style.height = '250px';
    mapholder.style.width = '500px';

    var myOptions = {
      center:latlon,zoom:14,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      mapTypeControl:false,
      navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
    }
    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
    var marker = new google.maps.Marker({
      position:latlon,
      map:map,
      title:"You are here!"
    });
}

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;
    }
}
// more info, see my post on http://stackoverflow.com/questions/27203977/google-api-address-components
function getCity(geocodeResponse) {
  var type = "locality";  //the function will look through the results and find a component with type = 'locatily'.  Then it returns that
  for(var i=0; i < geocodeResponse.address_components.length; i++) {
    for (var j=0; j < geocodeResponse.address_components[i].types.length; j++) {
      if (geocodeResponse.address_components[i].types[j] == type) {
        return geocodeResponse.address_components[i].long_name;
      }
    }
  }
  return '';
}
</script>
</body>
</html>

Getting Geolocation's City Name

2 Answers2