Map.panTo not working

Question

So I have two KML files that load based on the different zoom levels. Then I parse the files and create links that are supposed to pan to the given lat lng based on the KML file. However whenever I click on one of the links it gives me this error:

Uncaught TypeError: Cannot call method 'panTo' of null

I have checked and panToPoint is returning the correct values for the first two points on of the polygon in the KML file but when the map.panTo is called it gives that error above. Can anyone tell me why that is?

Here is the code

    var map = null;
var KMLLayer = null;
var KMLayer2 = null;
var item = "";
var nav = [];
var panToPoint;
function initialize() {
var mapOptions = {
  center: new google.maps.LatLng( 38.04798015658998, -84.59683381523666),
  zoom: 16,
  disableDefaultUI: true,
  zoomControl: true,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    KMLLayer = new google.maps.KmlLayer({url: 'https://sites.google.com/site/cs499fbt/files/Keenelandlayer1.kml'}, kmlOptions);
    KMLLayer2 = new google.maps.KmlLayer({url:'https://sites.google.com/site/cs499fbt/files/Keenelandlayer2.kml'},kmlOptions);

    KMLLayer.setMap(map);
    google.maps.event.addListener(map, "zoom_changed",function(event) {
        //below is the line that prevents the labels to appear, needs to be there to allow the second kml layer to be displayed
        event.preventDefault();
        if (!!map){
            var zoom = map.getZoom();
            if (zoom < 16){
                if (!!KMLLayer2.getMap()) KMLLayer2.setMap(null);
                if (!KMLLayer.getMap()) KMLLayer.setMap(map);
            }
            else{
                if (!KMLLayer2.getMap()) KMLLayer2.setMap(map);
                if (!!KMLLayer.getMap()) KMLLayer.setMap(null);
            }
        }
    });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
/////////////////On Click listeners
$(document).ready(function(){
    //initialise a map
    initialize();

    $.get("https://s3-us-west-2.amazonaws.com/keeneland-concourse-assets/Keenelandlayer1.kml", function(data){
    //$.get("/img/Keenelandlayer2.kml", function(data){
        var html = "";
        var test = "";
        //loop through placemarks tags
        $(data).find("Placemark").each(function(index, value){
            //get coordinates and place name
            coords = $(this).find("coordinates").text();
            place = $(this).find("name").text();
            test = "test";
            //store as JSON
            c = coords.split(",")
            nav.push({
                "place": place,
                "lat": c[0],
                "lng": c[1]
            });
            //output as a navigation
            html += "<li>" + place + "</li>";
        })
        //output as a navigation
        $(".navigation").append(html);
        //bind clicks on your navigation to scroll to a placemark
        $(".navigation li").bind("click", function(){
            panToPoint = new google.maps.LatLng(nav[$(this).index()].lng, nav[$(this).index()].lat);
            map.panTo(panToPoint);
        });
    });
}); 

Answer 1

Your map variable is local to the initialize function.

working fiddle

Remove "var" from in front of it inside the initialize function:

function initialize() {
var mapOptions = {
  center: new google.maps.LatLng( 38.04798015658998, -84.59683381523666),
  zoom: 16,
  disableDefaultUI: true,
  zoomControl: true,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};
var kmlOptions = {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
    KMLLayer = new google.maps.KmlLayer({url: 'https://sites.google.com/site/cs499fbt/files/Keenelandlayer1.kml'}, kmlOptions);
    KMLLayer2 = new google.maps.KmlLayer({url:'https://sites.google.com/site/cs499fbt/files/Keenelandlayer2.kml'},kmlOptions);

// ...