GoogleMap Open API #1 - 구글맵 시작하기.
GoogleMap Open API #2 - 컨트롤러 만들기.
GoogleMap Open API #3 - class GMap2 활용하기.
GoogleMap Open API #4 - 마커만들기.
-------------------------------------------------------------------------------------------
구글맵에 위치를 표시하기 위해서 사용하는 것이 마커입니다.
기본적으로 좌표만 있으면, 마커를 만드실 수 있습니다.
그리고 추가적으로 마커의 이미지를 변경할 수 있으며, 말풍선 라벨을 달 수 있습니다.
그럼 간단하게 마커의 생성과 말풍선 다는 동작 등에 대해서 간단히 살펴보도록 하겠습니다.
[그림1] 마커의 기본 이미지와 말풍선.
-----------------------------------------------------------------------------------------------
1. 마커 생성.
화면 지도의 중심좌표를 마커의 좌표로 잡아서, 마커를 생성하는 코드입니다.
var point = map.getCenter(); // 중심좌표를 가져옴.
var marker = new GMarker(point);
2. 마커 그리기
마커 생성 한 후에 마커를 지도 위에 그리는 코드입니다.
addOverlay 를 해야 마커가 지도 위에 나타나게 되며, removeOverlay 를 통해서 마커를 삭제하실 수 있습니다.
map.addOverlay(marker); // 마커 그리기.
//map.removeOverlay(marker); //마커 삭제
3. 좌표 이동시 중심 마커 이동하기.
간단한 응용예제로써, 지도를 움직일 때마다 마커가 지도의 중심으로 오도록 하는 코드입니다.
이벤트 핸들러를 통해서, 마우스의 움직임이 끝날때, 중심좌표를 받아서 마커의 좌표를 움직이도록 합니다.
// 마우스 이벤트를 동작이 끝날 때로 설정.
GEvent.addListener(map, "moveend", function() {
var point = map.getCenter(); // 중심좌표 가져오기.
marker.setPoint(point);
});
4. 마커에 말 풍선 달기.
마커위에 말풍선을 달 수 있습니다.
var html = '말풍선 테스트 입니다.';
marker.openInfoWindowHtml(html);
5. 마커에 마우스 오버시 말풍선 달기.
마커위에 마우스를 올려놓았을 때, 말풍선이 나타는 간단한 응용예제 입니다.
마우스 이벤트를 'mouseover' 로 설정하고, 수행동작을 코드합니다.
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml('마커위의 말풍선입니다.');
});
6. 마커에 마우스 클릭시 말풍선 달기.
마커를 마우스로 클릭하였을, 말풍선이 나타는 간단한 응용예제 입니다.
마우스 이벤트를 'click' 으로 설정하고, 수행동작을 코드합니다.
마우스오버 이벤트는 독립적으로 마우스오버와 마우스클릭에 각기 다른 이벤트를 설정하실 수 있습니다.
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml('클릭하셨습니다.');
});
----------------------------------------
예제의 '소스보기'를 통해서 전체 코드를 직접 살펴보시면, 보다 빠르게 이해하실 수 있습니다.
Google Reference 를 참고 자료로 활용하였습니다.
예제보기 참고자료
GoogleMap Open API #2 - 컨트롤러 만들기.
GoogleMap Open API #3 - class GMap2 활용하기.
GoogleMap Open API #4 - 마커만들기.
-------------------------------------------------------------------------------------------
구글맵에 위치를 표시하기 위해서 사용하는 것이 마커입니다.
기본적으로 좌표만 있으면, 마커를 만드실 수 있습니다.
그리고 추가적으로 마커의 이미지를 변경할 수 있으며, 말풍선 라벨을 달 수 있습니다.
그럼 간단하게 마커의 생성과 말풍선 다는 동작 등에 대해서 간단히 살펴보도록 하겠습니다.
[그림1] 마커의 기본 이미지와 말풍선.
-----------------------------------------------------------------------------------------------
1. 마커 생성.
화면 지도의 중심좌표를 마커의 좌표로 잡아서, 마커를 생성하는 코드입니다.
var point = map.getCenter(); // 중심좌표를 가져옴.
var marker = new GMarker(point);
2. 마커 그리기
마커 생성 한 후에 마커를 지도 위에 그리는 코드입니다.
addOverlay 를 해야 마커가 지도 위에 나타나게 되며, removeOverlay 를 통해서 마커를 삭제하실 수 있습니다.
map.addOverlay(marker); // 마커 그리기.
//map.removeOverlay(marker); //마커 삭제
3. 좌표 이동시 중심 마커 이동하기.
간단한 응용예제로써, 지도를 움직일 때마다 마커가 지도의 중심으로 오도록 하는 코드입니다.
이벤트 핸들러를 통해서, 마우스의 움직임이 끝날때, 중심좌표를 받아서 마커의 좌표를 움직이도록 합니다.
// 마우스 이벤트를 동작이 끝날 때로 설정.
GEvent.addListener(map, "moveend", function() {
var point = map.getCenter(); // 중심좌표 가져오기.
marker.setPoint(point);
});
4. 마커에 말 풍선 달기.
마커위에 말풍선을 달 수 있습니다.
var html = '말풍선 테스트 입니다.';
marker.openInfoWindowHtml(html);
5. 마커에 마우스 오버시 말풍선 달기.
마커위에 마우스를 올려놓았을 때, 말풍선이 나타는 간단한 응용예제 입니다.
마우스 이벤트를 'mouseover' 로 설정하고, 수행동작을 코드합니다.
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml('마커위의 말풍선입니다.');
});
6. 마커에 마우스 클릭시 말풍선 달기.
마커를 마우스로 클릭하였을, 말풍선이 나타는 간단한 응용예제 입니다.
마우스 이벤트를 'click' 으로 설정하고, 수행동작을 코드합니다.
마우스오버 이벤트는 독립적으로 마우스오버와 마우스클릭에 각기 다른 이벤트를 설정하실 수 있습니다.
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml('클릭하셨습니다.');
});
----------------------------------------
예제의 '소스보기'를 통해서 전체 코드를 직접 살펴보시면, 보다 빠르게 이해하실 수 있습니다.
Google Reference 를 참고 자료로 활용하였습니다.
예제보기 참고자료