이번 강좌에서는 지도 위에 데이터를 표시할수 있도록 마커와 인포윈도우에 대해서 알아보도록 하겠습니다.
1. 먼저 페이지에 구글맵 API의 자바스크립트를 로드시킵니다.
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAARGro4nGQa-vLoCDU_ERN4hTXvi_FEE3iSJJI9U2JdjRa12aHbBSRxOrulYQJSF08j7iJFBe747EMHw" type="text/javascript"></script>
key=부분은 할당받은 API KEY로 바꿔서 넣으면 되고, v= 부분은 사용하는 API의 버젼을 표시합니다. v=2라고 명시하면 2.대 버전의 지속적으로 업데이트된 API를 사용하게 됩니다. 업데이트 주기는 평균 2주 정도입니다. 좀더 안정적 버젼을 사용하고자 한다면 v=2.s를 넣어주며 평균 몇 달에 한번씩 업데이트 됩니다. 만약 업데이트에 영향을 받고 싶지 않다면, v=2.58과 같이 넣어주면 됩니다. 하지만 API의 업데이트를 지속적으로 하는 것이 바람직합니다.
2. 지도가 표시될 부분에 div를 넣어줍니다.
<div id="map" style="width: 500px; height: 400px"></div>
해당 id가 이 페이지에서 하나 밖에 없도록 주의해야 합니다.
3. body 태그에 메모리 문제 방지를 위한 코드를 추가합니다.
<body onunload="GUnload()">
4. 맵을 표시합니다.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.55938,126.975067),6);
map.setMapType(G_SATELLITE_MAP);
- new GMap2로 표시할 div의 id(여기서는 "map")를 넘겨서 지도 오브젝트를 생성합니다.
- addControl함수로 GLargeMapControl - 줌과 위치조절, GMapTypeControl - 위성, 지도 조절 컨트롤들을 추가합니다.
- setCenter함수로 표시할 위치와 줌레벨을 정해줍니다. 첫 번째 인자인 GLatLng 오브젝트로 위도와 경도를 결정합니다. 두번째 인자로 줌레벨을 조절합니다. 줌레벨은 맵에서는 0(지구전체) ~ 19(각각의 빌딩)까지, 위성에서는 0 ~ 20 까지 가능합니다. 숫자 하나 증가에 크기는 두배로 증가합니다.
- setMapType함수로 맵타입을 결정합니다. 맵타입은 크게 세가지로 G_NORMAL_MAP (보통맵), G_SATELLITE_MAP (위성지도), G_HYBRID_MAP (두가지 혼합) 으로 설정할 수 있습니다.
var marker = new GMarker(map.getCenter());
map.addOverlay(marker);
marker.openInfoWindowHtml("여기는! 서울!");
- GMarker마커를 원하는 위치에 생성합니다. map.getCenter()함수는 현재 맵의 가운데 위치를 반환합니다.
- map.addOverlay 함수로 마커를 화면에 표시합니다.
- marker.openInfoWindowHtml 함수로 넘겨받은 html을 해당 마커에 연결된 인포 윈도우위에 표시해줍니다.
자 두번째 강좌는 여기서 마칩니다. 강좌 내용에 궁금한 점이 있거나 잘못된 부분이 있을때에는 거침없이 댓글로 달아주세요. 예제 파일은 첨부하도록 하겠습니다. 웹브라우저에서 클릭하시고 소스보기로 소스 확인하세요.
참고사이트
http://www.google.com/apis/maps/documentation/introduction.html
| 첨부 파일 | 파일 크기 |
|---|---|
| gmap_ex1.html | 520 bytes |
0
points
0
points
강좌 잘 보고 있습니다. 강좌 읽던 중 궁금한 점이 있어서 여쭤봅니다.
마커를 생성할 때, 그 마커의 말풍선 크기를 변경할 수 있나요?
말풍선 크기를 작게 만들 필요가 있어서요 ^^ 답변 부탁드립니다.
600
points
크기는 <div style='width: 500px; height: 400px'>풍선</div> 말풍선의 div 스타일을 지정해서 변경할 수 있지만 최소 크기는 지정되어있는 것 같습니다.
0
points
예제 소스 읽어서 키만 바꿔 보았는데요.
전 왜 한글이 깨질까요? ㅎㅎ
0
points
utf8로 되어있어서 그럴겁니다.
euc-kr로 변경하시면 한글이 잘 보입니다...
0
points
Referring to this good post but that’s, as well, reasonable to buy the Ed Hardy Ed Hardy Shoes Ed Hardy clothes Cheap Ed HardyThe legal dissertation can be required by different people if include the stuff about this topic. I do know the that’s executable to determine the Ed Hardy Womens Jeans Ed Hardy Womens Knits Ed Hardy Womens Swimwear Ed Hardy Womens T-Shirts Ed Hardy Bags Ed Hardy Belts Ed Hardy Caps Abercrombie Fitch
댓글 쓰기