Google Map API V3 : 마커에 맞춤 데이터를 추가하는 방법


116

나중에 사용할 수 있도록 마커에 사용자 지정 정보를 추가 할 수있는 방법이 있습니까? 정보 창과 제목을 갖는 방법이 있지만 마커를 다른 정보와 연결하려면 어떻게해야합니까?

마커에 따라 다른 항목이 페이지에 표시되므로 마커를 클릭하면 클릭 한 마커에 따라 페이지의 콘텐츠가 변경되어야합니다. 클릭 등

감사

답변:


213

Google 마커는 자바 스크립트 개체이므로 key: value키는 유효한 문자열 인 양식에 맞춤 정보를 추가 할 수 있습니다 . 이를 개체 속성 이라고하며 다양한 방법으로 접근 할 수 있습니다. 값은 숫자 나 문자열과 같은 단순한 합법적이거나 함수 또는 다른 객체 일 수 있습니다. 세 가지 간단한 방법 : 선언, 점 표기법 및 대괄호

var markerA = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0, 0),
    customInfo: "Marker A"
});

var markerB = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-10, 0)
});
markerB.customInfo = "Marker B";

var markerC = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-20, 0)
});
markerC['customInfo'] = "Marker C";

그런 다음 유사한 방식으로 검색하려면 :

google.maps.event.addListener(markerA, 'click', function() {
    alert(this.customInfo);
});

3
이 패턴을 공식화 하는 문서는 없습니다 . 여기에 그들이 최신 버전에서 깨뜨리기보다는 그렇게하기를 바라고 있습니다.
Adam

1
'Marker'유형에 'customInfo'속성이 없습니다.
alehn96

1
typescript를 사용하는 경우 점 대신 대괄호를 사용하여 이러한 속성을 할당 할 수 있습니다
Cocoduf

14

마커에 사용자 지정 속성을 추가 할 수 있습니다 (API의 속성과 충돌하지 않도록주의하십시오).

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.