SonMan's IT BBS: 다음(daum) 약도 API 를 반응형으로 적용

2014년 12월 9일 화요일

다음(daum) 약도 API 를 반응형으로 적용

다음 약도 서비스를 홈페이지에 붙였는데...
이 홈페이지가 반응형홈페이지 였는데, 다음 약도 API 영역 자체는 줄이는게 어렵지 않았다.

하지만, 문제는 그렇게 api 영역만 줄이니, 지도에 표시되어 있는 마크가 원래 초기에 지정된 약도의 가운데 있는지라, 작은 단말기에서는 초기 화면에서 지정한 마크가 보이지 않게 된다는 단점이 있었다.

해결책을 찾다보니... 다음개발자네트워크에 'JJandck' 라는 분이 해결책을 제시해 놓은것이 있었다.

http://cafe.daum.net/daumdna/KErw/5882?q=%B4%D9%C0%BD%20%BE%E0%B5%B5%20API%20%B9%DD%C0%C0%C7%FC

나도 동일하게 해결....

<div id='subContent'>
<iframe id="map_iframe" src="http://dna.daum.net/include/tools/routemap/map_view.php?   width=800&height=550&latitude=37.021326505609025&longitude=127.05423592949135&contents=TEST&zoom=4"
 width="100%" height="585" scrolling="no" frameborder="0"></iframe>
</div>


<script language="javascript">
shows();
window.onresize = function checkResize() {
    shows();
}

function shows() {
    var width_ = document.getElementById('subContent').offsetWidth - 20;
    var para = document.getElementById("map_iframe").src.split("?");
    var para_1 = para[1].split("latitude");

    para_1[0] = "width=" + width_ + "&height=450&latitude";
    
    document.getElementById("map_iframe").src = para[0] + "?" + para_1[0] + para_1[1];
    document.getElementById("map_iframe").width = width_;
}
</script>

거의 같은 해결방법이지만, 나의 경우 해상도 변경을 잡아내는 것을 jQuery 가 아닌 그냥 javascript 를 썼다는것 정도 뿐.
결국 브라우져의 사이즈 변경시 iFrame 을 리로드 하는, 동일한 방법이다.

========= 2017.03.13 변경 ==============

다음 약도 API 가 바뀌었다.
이젠 기존 API 는 사용할 수 없으니, 새로운 API 를 사용해야 함.

일단 다음 맵에 가서 원하는 지점을 검색하여 찾아야 함.