Google지도의 내부 토글 전환

Question

시작 위치에 마커 1 개를 표시하는 Google지도를 만들었습니다. 거기에서 위치를 전환 할 수 있습니다. 1 개의 마커가있는 새 위치가 표시됩니다.

위치 전환 이외에도 2 개의 주요 위치 각각에 대해 하위 위치를 선택할 수 있습니다.

var locationsBerlin = [ 
    ['Berlin 1', 52.519433,13.406746, 1], 
    ['Berlin 2', 52.522606,13.40366, 2], 
    ['Berlin 3', 52.52113,13.409411, 3], 
    ['Berlin 4', 52.517043,13.402394, 4], 
    ['Berlin 5', 52.51703,13.412801, 5], 
    ['Berlin 6', 52.525086,13.399798, 6], 
    ['Berlin 7', 52.525151,13.410741, 7] 
]; 

이 내가 "주"위치를 선택하는 방법입니다

나는 (각 위치 1)이 개 바르를 만드는 것이 가장 좋은 일 [예]이 될 것이라고 생각했다.

markerMain = new google.maps.Marker({ 
     position: new google.maps.LatLng(locationsBerlin[0][1], locationsBerlin[0][2]), 
     map: map, 
     icon: customPin 
    }); 

나머지 배열은 하위 위치입니다. 이제 사용자가 링크를 눌러 var의 나머지 위치를 표시 할 수있게하려고합니다. 위치의 양은 동적입니다.

그래서 토글 링크를 클릭 한 후 호출 할 함수를 만들려고했습니다.

function subLocationBerlin(){ 
    alert("berlin sub"); 
    for (i = 1; i < locationsBerlin.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locationsBerlin[i][1], locationsBerlin[i][2]), 
      map: map 
     }); 
     markers.push(marker); 
    } 
} 

하지만 지금은 붙어 있습니다. 어떤 이유로지도에 여분의 마커를 추가하지 않고 무엇이 잘못되었는지를 알지 못합니다.

당신은 바이올린을 찾을 수 이쪽 : http://jsfiddle.net/gvMSX/3/

Answer 1

지도 변수 (초기화 및지도를 표시 한)는 초기화 함수에 로컬 :

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

가 제거 " var "를 앞에 붙여 글로벌 버전을 초기화합니다.

참고 또한 자바 스크립트 배열은 당신이에 1 전을 초기화 할 때 기준으로 0이 첫 번째 마커를 누락 될 것입니다 귀하의 루프

function subLocationBerlin(){ 
    console.log('Berlin Sub Called'); 
    for (i = 1; i < locationsBerlin.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locationsBerlin[i][1], locationsBerlin[i][2]), 
      map: map 
     }); 
     markers.push(marker); 
     console.log(marker); 
    } 
}