[Gmap3] 2. 마커(marker)의 추가, 삭제
마커(marker)
지도에 특정 위치를 표시하는 기능인 마커는 가히 구글맵을 이용하는 주 목적이 아닐까 생각됩니다. 이를 지도에 추가하는 방법은 한가지가 아니라 여러가지 방법이 있습니다.
추가
일단 기본적으로 gmap3 함수를 실행하면서 파라미터로 marker를 넣어주는 것이 일반적입니다.
|
1 2 3 4 5 |
$("#my_map").gmap3({ marker:{ address: "Haltern am See, Weseler Str. 151" } } ; |
여러 마커를 넣고 싶을 때는 marker내부에 values라는 곳에 배열의 형태로 넣으면 됩니다.
|
1 2 3 4 5 6 7 8 |
$("#my_map").gmap3({ marker:{ values: [ {latLng: [48.8620722, 2.352047]}, {address: "Haltern am See, Weseler Str. 151"} ] } } ; |
사실 처음 예제에서 당연한 것처럼 address를 사용하고 있습니다. 하지만 address보다는 지구 좌표인 위도/경도가 일반적으로 쓰이죠. 이때는 latLng 를 이용하면 됩니다. 위의 예제에서 보듯, values 아래에 어떤 방식으로든 gmap3가 인식할 수 있는 형태의 배열로 넣는다면 여러 마커들이 지도에 나타나게 됩니다.
이외에도 values에 사용할 수 있는 마커 정보로는,
- id : 고유 아이디
- latLng : [위도, 경도]
- address : "주소"
- data : "추가로 저장하고 싶은 문자열"
- option : {
- animation : google.maps.Animation.DROP or google.maps.Animation.BOUNCE
- draggable : true or false
- icon: http://iconurl
}
등이 있습니다.
이렇게 삽입하는 방법은 지도가 생성된 후 나중에 추가로 실행할 때에도 동작하므로 페이지가 모두 로딩이 된 후에 사용해도 된다는 점이 매우 편리합니다.
삭제
전체 마커를 지우는 방법은 아래와 같습니다.
|
1 2 3 4 5 |
$('#my_map').gmap3({ clear: { name:["marker"] } }); |
gmap3에 추가된 여러 오브젝트 중 이름이 marker인 것을 삭제하라는 명령으로, gmap3 함수에 파라미터로 전달된 marker가 선택되어 지워지는 것입니다.
|
1 2 3 4 5 |
$('#my_map').gmap3({ clear: { id: "mTagX" } }); |
위와 같은 코드는 id가 mTagX인 것만을 삭제합니다. 앞에서 마커를 추가할 때 id 항목에 값을 넣어 마커간 구분을 했다면 내가 원하는 마커의 id를 지정하여 삭제할 수 있습니다. 파라미터로 넣는 id값은 배열로 해도 잘 동작합니다.