newbie javascript scope problem

because map is declared inside the function initialize, clicked can't access it you need to declare it outside initialize like

var map = null;
function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(37.775057,-122.419624),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map-canvas"),
          mapOptions);
    }
google.maps.event.addDomListener(window, 'load', initialize);
function clicked(id) {
  $.ajax({
    type: "GET",
    url: 'response.php',
    data: {id: id},
    success: function (lats) {
      var obj = $.parseJSON(lats);
      var line = [];
      for (var i = obj.length - 1; i >= 0; i--) {
        line.push(new google.maps.LatLng(obj[i].latitude, obj[i].longitude));
      };
      var polyPath = new google.maps.Polyline({
    path: line,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
      polyPath.setMap(map);
      console.log(polyPath);
    }
  });
  return false;
}

now clicked can access it because it's outside the initialize scope

You can move map to the global scope.

var map;
function initialize() {
    ...
    map = ....;
}

If you're concerned with polluting the global scope, you can put both inside a single function to preserve the namespace:

(function() {
     var map;
     function initialize() {
         ...
         map = ....;
     }
     ...(everything else) ...
})();

If you are referring to getting the map variable from your initialize function, here is what you would need to do.

var map;
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(37.775057,-122.419624),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function clicked(id) {
    $.ajax({
        type: "GET",
        url: 'response.php',
        data: {id: id},
        success: function (lats) {
            var obj = $.parseJSON(lats);
            var line = [];
            for (var i = obj.length - 1; i >= 0; i--) {
                line.push(new google.maps.LatLng(obj[i].latitude, obj[i].longitude));
            };
            var polyPath = new google.maps.Polyline({
                path: line,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
            polyPath.setMap(map);
            console.log(polyPath);
        }
    });
    return false;
}

What I have done is declare map outside the initialize function. In this case, it will have global scope to all of your Javascript code that you can call later. The initialize function will be able to set it for you and the AJAX call will be able to read it.

An alternative to declaring map outside of the initialise function would be using window.map which assigns it as the map property on the window object. As the window object can be accessed anywhere as it is global, you just need to call window.map to read and write to it anywhere.

A quick but not recommended solution would be to remove the var in front of map making it a global variable.