Tem vários exemplos e códigos prontos na internet, mas basicamente o que você deve fazer é:

1) Obtenha as coordenadas com a Geolocalização do HTML5: [w3schools - HTML5 Geolocation][1]

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

2) Obtenha a cidade a partir das coordenadas com a API do google: [Developers Google - Geocoding][2]

    "http://maps.googleapis.com/maps/api/geocode/jsonlatlng='+lat+','+long+'&sensor=true"

Exemplo de código:
------------------

 [stackoverflow - Get city name using geolocation][3]

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Reverse Geocoding</title> 
    
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
      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<results[0].address_components.length; i++) {
                for (var b=0; b<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);
          }
        });
      }
    </script> 
    </head> 
    <body onload="initialize()"> 
    
    </body> 
    </html> 


  [1]: http://www.w3schools.com/html/html5_geolocation.asp
  [2]: https://developers.google.com/maps/documentation/geocoding/intro
  [3]: http://stackoverflow.com/questions/6797569/get-city-name-using-geolocation