BLOG main image
분류 전체보기 (77)
프로젝트 (8)
IT소문 (9)
영화가주는인생 (5)
OpenAPI (9)
DBMS (5)
JAVA (16)
IPhone/Object-C (9)
안드로이드 (0)
WEB etc (8)
Server (1)
Michael Kors Handbags on Sale
Michael Kors Handbags on Sale
Nike Roshe Run
Nike Roshe Run
michael kors handbags outlet
michael kors handbags outlet
outlet de zapatillas nike
outlet de zapatillas nike
Cheap beats by dre uk
Cheap beats by dre uk
2,376,587 Visitors up to today!
Today 23 hit, Yesterday 102 hit
daisy rss
tistory
2010.11.16 14:32
첨으로 구글애드센스를 달랐습니다.ㅋㅋ

두번째 시간인데 구글맵 샘플소스를 보고 퍼다 나르는 느낌이 들어서..식상하겠다는 생각이 들었습니다.
담에는 쌈빡한걸로 들고와야 겠어요.
우선 google map 시리즈를 다 마치고 들고 오겠습니다.ㅋ

저번 시간에 이어서 하도록 하겠습니다.

var marker;
var latlng = new google.maps.LatLng(-34.397, 150.644);
marker = new google.maps.Marker({ 
  position: latlng, 
  map: map,
  title: '마커'
});

var에 marker를 변수에 담아서 보관하고 google.maps.Marker 실행하여 마커를 표시합니다.
실행하면 디폴트 이미지가 표시되기 때문에 사용자가 원하는 이미지를 올리고 싶을거에요.
그럼 이번에는 이미지는 올리면 올려보겠습니다.

var size_x = 40;
var size_y = 40;
var image = new google.maps.MarkerImage( 'http://www.travista.co.kr/files/where/thumb/thumb_20101031_102502_581_C0',  
   new google.maps.Size(size_x, size_y),
   '',
   '',
   new google.maps.Size(size_x, size_y));

var latlng = new google.maps.LatLng(-34.397, 150.644);
marker = new google.maps.Marker({ 
  position: latlng, 
  map: map,
  icon: image,
  title: '마커'
});


google.maps.MarkerImage 부분을 추가하면 기본 이미지마크 말고, 자신이 원하는 이미지를 올려볼수가 있습니다.

MarkerImage(url:stringsize?:Size,origin:Point,anchor:Point,scaledSize:Size)           

'origin'과 'size'는 스프라이트 이미지의 세그먼트를 선택하는 데 사용되고 
'anchor'는 기본 중간 아래 위치에서 앵커 지점의 위치를 재정의(override)합니다. 
이미지의 앵커는 시스템이 이미지의 위치를 추적하기 위해 참조하는 픽셀입니다. 
기본적으로 앵커는 이미지의 중간 아래로 설정됩니다(너비/2, 높이로 좌표가 설정됨). 
따라서 마커를 지정한 LatLng에 배치하면 앵커로 정의된 픽셀이 지정한 LatLng 위치에 놓여집니다. 
이미지를 확장하려면 스프라이트 여부와 관계없이 scaledSize 값을 전체 이미지 크기로 설정하고 
조정된 값으로 크기, 원점 및 앵커를 설정합니다. 
MarkerImage는 일단 생성되면 변경할 수 없습니다.



그리고 클릭시 말풍선 띄우기

말풍선를 클릭해서 원하는 정보를 보이도록 하겠습니다.

google.maps.InfoWindow 를 호출하면 말풍선이 나타나게 됩니다.
저희가 하는건 클릭하면 띄워야하기 때문에 click 이벤트를 주도록 하겠습니다.

google.maps.event.addListener(marker, 'click', function() { 
var infowindow = new google.maps.InfoWindow( 
    { content: '안녕하세요~', 
      size: new google.maps.Size(100,100) 
    })
infowindow.open(map, marker);
});

말 풍선이 보이시나요?ㅋ

이벤트인자설명
click MouseEvent 이 이벤트는 폴리라인에서 DOM click 이벤트가 시작되면 시작됩니다.
dblclick MouseEvent 이 이벤트는 폴리라인에서 DOM dblclick 이벤트가 시작되면 시작됩니다.
mousedown MouseEvent 이 이벤트는 폴리라인에서 DOM mousedown 이벤트가 시작되면 시작됩니다.
mousemove MouseEvent 이 이벤트는 폴리라인에서 DOM mousemove 이벤트가 시작되면 시작됩니다.
mouseout MouseEvent 이 이벤트는 폴리라인 외부로 마우스를 이동하면 시작됩니다.
mouseover MouseEvent 이 이벤트는 폴리라인 위로 마우스를 이동하면 시작됩니다.
mouseup MouseEvent 이 이벤트는 폴리라인에서 DOM mouseup 이벤트가 시작되면 시작됩니다.
rightclick MouseEvent 이 이벤트는 마우스 오른쪽 버튼으로 폴리라인을 클릭하면 시작됩니다.




여기까지 입니다.ㅋ
다음 3교시에 뵙도록 하겠구요. 3교시에는 지도에서 주소를 가져오고
요즘 많이 하는 동선그리기를 따라 해보도록 하겠습니다.크크

그럼 즐프~






김택민 | 2012.08.08 10:51 신고 | PERMALINK | EDIT/DEL | REPLY
질문있어서 질문드려요~
그럼 말풍선 띄울때 그 안에 들어가는 content에 값을 변수로 저장해서 넣을순없나요..??
닥컴 | 2012.08.09 09:52 신고 | PERMALINK | EDIT/DEL

var content = '안녕하세요~';

이런식으로 해서 marker에 content 옵션에 변수를 넣으시면 되구요.
텍스트도 되지만 html 도 가능합니다.

수고하세요.

coolk999 | 2012.10.29 07:14 신고 | PERMALINK | EDIT/DEL | REPLY
좋은 정보 감사합니다...
그런데요... 님이 올려주신 소스 이용해서 마커 띄우고 말풍선 까지 구현은 했는데요...
모든 마커가 클릭을 하게되면 마지막 마커에서 말풍선이 뜨네요....
해당 마커에서 말풍선을 띄울려면 어떻게 수정을 해야 할까요?ㅠ
조언 부탁드려요 ...ㅠ 수고하세요
asdf | 2014.05.15 17:13 신고 | PERMALINK | EDIT/DEL | REPLY
폴리라인이 아니고 마커 올렸을때 이벤트 작동인대요 -_ -;;
Name
Password
Homepage
Secret