複数URLの取得結果をまとめた配列にしたいのですが、下記のコードでは結果がNULLになってしまします。
ログではtitleは取れている形跡はみられますが、配列をNULL要素で作った後にWebから結果を取得しているように見えます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<div id="result"></div>

<script src="../lib/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

  var urls = [
    "http://localhost:8080/books/1.json",
    "http://localhost:8080/books/2.json",
    "http://localhost:8080/books/3.json",
  ];

  var getTitle = function (url) {
    $.get(url,
        function (data) {
          console.log("title:" + data.title);
          return {
            url: url,
            title: data.title
          }
        }
    );
  };

  var results = urls.map(getTitle);
  console.log("results: " + JSON.stringify(results));
  $("#result").text(JSON.stringify(results));

</script>
</body>
</html>

結果ログ

results: [null,null,null]
title:t12
title:t1
title:t13

results: [{url:"http://〜/1.json", title: t1},{ (略) },{ (略) }]
のような配列を取得するにはどうすれば良いでしょうか？

よろしくお願いいたします。