[ 구글맵 / map / 지도 / 소스 / 자바스크립트 / jQuery / 다운로드 ] jVectorMap, Polymaps, bMap

[ 구글맵 / map / 지도 / 소스 / 자바스크립트 / jQuery / 다운로드 ] jVectorMap, Polymaps, bMap


오늘은 페이지 상에서 지도를 뿌려주는 소스 3가지를 소개해드릴게요.


 기본적으로는 구글맵API를 많이들 쓰실거에요.

http://code.google.com/intl/ko-KR/apis/maps/documentation/mapplets/guide.html  

여기가보시면 기본적인 구글맵 사용법들이 나와 있습니다.

이 외에 그냥 특별나게 조금 독특하고 쓸만한 지도종류 3가지에요.


1. jVectorMap

첫번째는 jVectorMap입니다. 단순화한 지도에요.
깃발꽂기나 그런 기능은 턱없이 부족하지만..그냥 평면적이고 2차원적인 지도입니다. 

기본적으로는 jQuery를 바탕에 두고 만들어졌습니다.

 

▼▼▼▼ 다운로드 ▼▼▼▼

jquery.vector-map.zip

 

웹 사이트 :  http://jvectormap.owl-hollow.net/   

2. bMap

 2번째는 bMap입니다. 기본 api는 구글맵입니다.

그걸 그냥 쓰기 편하게 했다고 할까요. 마크, 레이어등을 설계처음부터 염두해두고 개발되었다네요.

역시나 기본은 jQuery입니다. 요즘 대세인관계로..

구글맵을 사용하다보니까요.. 구글맵 API키를 필요로 합니다.

 [ Source Code ]
 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_GOOGLE_KEY" type="text/javascript"></script>

<script src="jQuery.bMap.1.2.3.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){ 

$("#map1").bMap({

mapZoom: 7

});

});

</script>

<div style="width:80%;height:400px;margin:0 auto" id="map1">

</div>

 
▼▼▼▼ 다운로드 ▼▼▼

jQuery.bMap.1.3.1.min.js

웹 사이트에 가시면 자세한 사용법과 예제가 나와 있습니다.

웹 사이트 :  http://www.blocsoft.com/bmap/

3.Polymaps

3번째는 Polymaps입니다.

이미지를 보시면 아시겠지만.. 예쁘장합니다. ㅎㅎㅎㅎㅎ

전 이런거 좋아합니다..ㅋㅋㅋ

[ Source Code ]
 

var po = org.polymaps
var map = po.map()

ent.getElementById("map").appendChild(po.svg("svg"))) .add(po.interac

.container(docu
mt()) .add(po.hash()); map.add(po.image() .url(po.url("http://{S}tile.cloudmade.com"

/{X}/{Y}.png") .hosts(["a.", "b.", "c.", ""]))); map.add(po.compass()

+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register + "/999/256/{Z
}

.pan("none"));

▼▼▼▼ 다운로드 ▼▼▼▼

simplegeo-polymaps-v2.5.0-0-gaa653ba.zip

역시나 웹 사이트 가보시면 예제별 사용법부터해서 자세하게 나와있습니다.

  

웹 사이트 : http://polymaps.org/