[ 구글맵 / api / v3 / map / 지도 ] google map api 사용하기, 마커찍기

[ 구글맵 / api / v3 / map / 지도 ] google map api 사용하기, 마커찍기


웹 사이트에 구글맵 api를 통해서 간단하게 지도를 띄울 수 있습니다.

참고로 V3 API는 개발자코드나 기타 사이트 코드가 필요없습니다.

그냥 붙여다가 쓰시면되요.

요로코롬 말이지요.

마커표시와 해당 마커위로 마우스를 올렸을 때 간략한 정보도 띄워줄 수 있습니다.

먼저 제일 중요한 스크립트를 불러와야 됩니다.

위에 집어 넣으니까 쓸모없는 소스가 붙는데요;;
[script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"]
이렇게만 있으면 됩니다. 다 불러오셨으면 마커를 저장해야겠지요.

 

소스에서 보시면 e.latLng 라는 변수가 해당 마커의 위도와 경도 입니다.

값을 알고자 할때는 alert(e.latLng); 를 쳐보면 쉽게 값을 알 수 있습니다.

해당 변수를 hidden 필드에 주시거나 해서 저장시켜서..다음에 해당 글을 읽거나 페이지가 로드 되었을때

다시 해당 마커위치에 지도를 표시하면되겠지요.

 

얘도 쓸모없는 소스가;;

[div id="map_canvas"][/div]

이렇게만하시면되구요.

위와 같이 div 태그에 map_canvas를 아이디를 주면 해당 div에 지도가 나타납니다. 필요에 따라서 div 사이즈(width, height)를 조정하면 지도 사이즈도 커지겠죠??

그러면 이제 지도에 마커를 띄우고 해당 지역을 볼러와보겠습니다.

위의 좌표는 독도의 좌표입니다. ㅎㅎㅎㅎ

필요에 따라서 좌표들을 DB에 저장시켰다가 불러와도 되구요. 편하실데로..