최근 모바일웹 페이지 프로젝트에서,
4개의 법무사가 연합된, 합동 사무소 모바일 전용 웹 페이지 개발 프로젝트였는데,

각 사무소의 지도를 표시하는 부분이 있었죠~

처음에는 구글 embed api를 이용한 간편한 방식으로 처리를 했는데,
구글이 오류를 일으켜서, 구글링을 해봐도 뾰족한 해결책이 없어서,
한국인 정서(?)에 맞는 다음 지도로 갈아 탔습니다. ㅎ

다음지도를 쓰기 위해서는,
가장먼저~~~ 다음 개발자로 가입후, api key를 발급받아야 합니다.
(1일 5만회까지 무료입니다~^^)

지도를 표시하는 방법중에서 해당하는 위치를 지도의 중앙에 위치시키는 것이 중요합니다.
해당하는 위치의 위도와 경도를 알아야 하는데~~

위도 경도를 매 주소마다 가져오는 것도 귀찮고 =.=
그래서~ 주소를 위도와 경도로 바꿔주는 코드를 이용했습니다.

대략 아래와 같습니다.

[code lang=”js”] geocoder.addr2coord(‘서울시 강남구 삼성로 550 은성빌딩’, function(status, result) {
if (status === daum.maps.services.Status.OK) { //주소를 제대로 가져왔나요?
var coords = new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng);
}
});[/code]

이후, 지도 옵션 몇개 설정하고 해당하는 화면(여기서는 #map)에 표시해 주면 끝~

[code lang=”js”] var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: coords, // 지도의 중심좌표
level: 4 // 지도의 확대 레벨
};

// 지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);[/code]

마커를 표시하는 등의 구체적인 옵션을 원하시면, 아래의 링크를 참고하세요~ ^^

http://apis.map.daum.net/web/

아래는 결과물~

IMG_7771

모바일 홈페이지가 필요하시다면,
카톡으로 상담받기