[Gmap3] 3. InfoWindow 다루기
InfoWindow
InfoWindow는 정보를 보여주기 위해 사용하는 작은 창입니다. 예를 들면, 특정 Marker를 클릭하였을 때, 근처에 InfoWindow를 나타나게 하고 내부에 연관된 정보를 넣는 식으로 사용하는 것을 많이 보셨을 것입니다.
gmap3의 문서에는 아래와 같이 간단한 예제를 보여주고 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$("#test1").gmap3({ infowindow:{ address:"Pourrieres, France", options:{ content: "Hello World !" }, events:{ closeclick: function(infowindow){ alert("closing : " + infowindow.getContent()); } } } }); |
gmap을 생성하거나, 생성한 후에 gmap3 함수를 이용하여 infowindow를 설정합니다. 이렇게 사용해도 아무런 문제가 없고 쉽지만, 이것은 단순히 정적인 infowindow만을 볼 수 있습니다. marker를 클릭했을 때 반응하는 등의 사용법은 어떻게 해야 하는 것일까요? 사이트의 예제를 뜯어보면 몇가지 사용법이 더 있습니다.
일단 infowindow 객체를 따로 빼올 수 있습니다. 이것을 사용해서 gmap3 함수를 통하지 않고 조금 편하게 가보도록 합시다.
1 |
var infowindow = $("test1").gmap3({get:{name:"infowindow"}}) ; |
gmap3의 get은 특정 객체를 가져오는 기능을 합니다. 앞서 marker에서도 사용한 적이 있습니다. 이번에는 name을 infowindow로 지정해서 infowindow 객체를 가져오도록 하였습니다. infowindow가 false로 되어버린다고요? 그건 gmap3에서 infowindow를 지정하지 않아서 아직 infowindow가 생성되지 않아서 그렇습니다. 하나 만들어주면 됩니다.
1 2 3 4 5 6 7 8 9 10 11 |
$(this).gmap3({ infowindow:{ anchor:marker, options:{content: content}, events:{ closeclick: function(infowindow){ alert("closing : " + infowindow.getContent()); } } } }) ; |
infowindow는 anchor, options, events의 파라미터를 가질 수 있습니다. anchor는 특정 marker와 연관을 짓는 항목입니다. options는 google.maps.InfoWindowOptions에 나온 옵션 항목들입니다. 가장 중요한 것은 content로 창 내부에 출력될 내용을 넣어주면 됩니다. events는 이벤트 발생시 동작할 함수를 지정해주면 됩니다. 이벤트는 closeclick, content_changed, domready, position_changed, zindex_changed가 있습니다.
infowindow를 생성했거나 만들어진 것을 가져왔다면, 이제 화면에 표시해야 합니다.
1 2 |
infowindow.open(map, marker) ; infowindow.setContent(text) ; |
간단합니다. Google maps의 객체와 marker를 넣어주면 자동으로 marker와 연결되어 infowindow가 출력됩니다. setContent 함수로 이후에 내용을 집어넣었습니다.