이번 강좌에서는 지도 위에 데이터를 표시할수 있도록 마커와 인포윈도우에 대해서 알아보도록 하겠습니다.
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 |
댓글 쓰기