Map.panTo not working

Question

그래서 다른 줌 레벨을 기반으로로드되는 두 개의 KML 파일이 있습니다. 그런 다음 파일을 구문 분석하고 KML 파일을 기반으로 주어진 latng으로 이동하는 링크를 만듭니다.

Uncaught TypeError: Cannot call method 'panTo' of null 

내가 확인하고 panToPoint지도 KML 파일의 다각형의하지만 때 처음 두 점에 대한 올바른 값을 반환 : 내가 링크 중 하나를 클릭 할 때마다 그러나 그것은 나에게 오류를 제공합니다. panTo가 호출되면 위의 오류가 발생합니다. 아무도 그 이유를 말해 줄 수 있습니까?

여기

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

지도 변수는 초기화 함수에 로컬 코드입니다.

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); 

// ...