Question

I know that this question has been asked million times so my apologies.

I looked at all other examples and I dont understand why the following code is not working now.

I get undefined alert box when I place it outside the CheckinMap function.

Why is it?

$(document).ready(function() { 
    var MapData;
        $(function CheckinMap() {
                $.ajax({
                    type: "GET",
                    url: "content/home/index.cs.asp?Process=ViewCheckinMap",
                    success: function (data) {
                        MapData = data;
                    },
                    error: function (data) {
                        $("#checkinmap").append(data);
                    }
                });
            });
    alert(MapData);
    }); 

Answer 1

MapData is undefined because the alert is executed while the ajax call is still running (ajax is asynchronous) and the response is not yet available. So change your code in this way

 success: function (data) {
         MapData = data;
         alert(MapData);
 },

or continue the code execution calling another function

 success: function (data) {
         continueExecution(data)
 },
 ...

 function continueExecution(data) {
     alert(data)
 }

or use deferred objects (on jQuery 1.5+)

$.ajax({
   type: "GET",
   url: "content/home/index.cs.asp?Process=ViewCheckinMap"
})
.done(function(data) { alert(data) })