Google지도 중심점 이동 onclick

Question

Google지도 load 기능을 초기화했으며 정상적으로 작동합니다. 클러스터가있는 마커도 여러 개 있습니다. 나는 마커와 클러스터 코드를 여기에 넣지 않았다. 표준 코드입니다. 내 코드 :

jQuery(document).ready(function(){ 
    initialize(); 
}); 

function initialize() { 
    var center = new google.maps.LatLng(59.875405, 10.842099); 
    var zoom = 10; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: zoom, 
     center: center, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
} 
function mapAnimate(){ 
    var map = google.maps.Map(document.getElementById("map-canvas")); 
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
     window.setTimeout(function() { 
      map.panTo(new google.maps.LatLng(58.9633, 5.7189)); 
     }, 500); 
    }); 
} 

그런 다음지도를 다시 생성하지 않고지도를 다른 중심 위치로 이동하고 싶습니다. 함수 mapAnimate()을 호출하는 링크가 있습니다.

HTML :

<a href="javascript:void(0);" onclick="mapAnimate()">test</a> 

그러나이 작동하지 않습니다. 다음과 같은 오류가 발생합니다.

TypeError: c[Eb] is not a function...... 

사실지도 인스턴스가 없습니다.

Answer 1

map 변수를 함수 외부에 선언하십시오. 그 트릭을해야합니다.

jQuery(document).ready(function(){ 
    initialize(); 
}); 

var map; 

function initialize() { 
    var center = new google.maps.LatLng(59.875405, 10.842099); 
    var zoom = 10; 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: zoom, 
     center: center, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
} 
function mapAnimate(){ 

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
     window.setTimeout(function() { 
      map.panTo(new google.maps.LatLng(58.9633, 5.7189)); 
     }, 500); 
    }); 
} 

하지만 당신은 클릭 이벤트에서 mapAnimate() 함수를 호출하는 경우 당신은지도 객체에서 해당 리스너를해야하는 이유, 내가 볼 수 없습니다.