Facebook api - cannot read property name of undefined

Question

Hi I am trying to get the hometown of the person logged into Facebook on my website and eventually create a marker of their location on google maps.

I am getting Uncaught TypeError: Cannot read property 'name' of undefined in my browser console on the line var city = response.hometown.name;.

Please help me with this problem, I have tried some solutions posted earlier but will try again as per suggestions. Thanks.

Here is the facebook button in the HTML:

<fb:login-button data-scope="public_profile,email,user_hometown" onlogin="checkLoginState();" autologoutlink="true">
</fb:login-button>
<div id="status"></div>

facebook.js file:

// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
  // Logged into your app and Facebook.
  testAPI();
} else if (response.status === 'not_authorized') {
  // The person is logged into Facebook, but not your app.
  document.getElementById('status').innerHTML = 'Please log ' +
    'into this app.';
} else {
  // The person is not logged into Facebook, so we're not sure if
  // they are logged into this app or not.
  document.getElementById('status').innerHTML = 'Please log ' +
    'into Facebook.';
}
}

// This function is called when someone finishes with the Login
// Button.  See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
    console.log(JSON.stringify(response));
    if (response.status == "connected") {
      // send access token to server
      authToServer(response, function() {
        // after logged in
        // get friends data and add to map
        //addFriendsToMap();
      })
  };
})//, {scope: 'public_profile,email,user_hometown,user_location'});
}

window.fbAsyncInit = function() {
FB.init({
  appId      : '*****************',
  cookie     : true,  // enable cookies to allow the server to access
                      // the session
  xfbml      : true,  // parse social plugins on this page
  version    : 'v2.2', // use version 2.2
  scope      : 'public_profile,email,user_location,user_hometown'
      });
      FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
      });
};

  // Load the SDK asynchronously
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  // Here we run a very simple test of the Graph API after login is
  // successful.  See statusChangeCallback() for when this call is made.
  function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      console.log(response);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
      var city = response.hometown.name;
      alert(city); 
      addFriendsToMap();
    });
  }

  function authToServer(authResponse, callback) {
    var authReq = new XMLHttpRequest();

    authReq.onreadystatechange = function() {
      if (authReq.readyState==4 && authReq.status==200) {
        console.log("logged in with server");
        callback();
      }
    }
    authReq.open("POST", "http://localhost:3000/auth", true);
    authReq.setRequestHeader("content-type", "application/json");
    authReq.send(JSON.stringify(authResponse));
  }

  function addFriendsToMap() {

      var dataURL = "http://localhost:3000/model/data.json";
      var friendsReq = new XMLHttpRequest();

      friendsReq.onreadystatechange = function() {
       if (friendsReq.readyState==4 && friendsReq.status==200) {
         // parse the response friendsReq.responseText as json
         console.log("returned from server facebook request")
         var jsonData = JSON.parse(friendsReq.responseText);
         var friends = jsonData.friends;
         var index = 0;

         // for each element in the friends array add a marker
         while (index < friends.length) {
           var friend = friends[index];
           var marker = new google.maps.Marker({
             position: new google.maps.LatLng(
               friend.lat,
               friend.lng),
               title: friend.name,
               map: map
             });
             index++;
           }
         }
       }
       friendsReq.open("GET", dataURL, true);
       friendsReq.send();
  }