구글맵 javascript API v3에 대한 정리~

티스토리 뷰

프로그래밍/Web

구글맵 javascript API v3에 대한 정리~

미니~ 2011. 10. 21. 18:45

간만에 모바일 웹으로 구글 맵을 다룰 필요가 있어 Google Map Javascript API v3을 사용해봤습니다.
구글 사이트에 정리가 잘 되어 있기는 하지만 간략하게 내용을 정리해 보려고 합니다.

먼저 Google Map JavaScript API v3에 대한 프리젠테이션 자료입니다. 1시간으로 비교적 길지만 시간날 때 한번쯤 들어보면 괜찮을 것 같네요.
모바일 환경등을 지원하기 위해 기존 Map의 속도를 향상시키기 위한 내용들이 앞부분에 나와 있네요..

Google Map JavaScript API v3으로 데스크탑과 모바일 환경을 지원하고 있구요.
기존의 JavaScript API는 더 이상 지원하지 않기 때문에 버전 3으로 마이그레이션 하라고 권고하고 있습니다.

실제 튜토리얼을 살펴보면 굉장히 쉽게 이해할 수 있을 겁니다.
체감상으로도 속도도 향상된 것 같은데요. Google Map의 튜토리얼 페이지는 다음과 같습니다.

http://code.google.com/intl/ko-KR/apis/maps/documentation/javascript/tutorial.html

한글로 잘 설명되어 있죠.. ^^
그리고 아이폰과 안드로이드와 같은 휴대용 기기에서 사용할 때의 내용에 대해서는 다음 페이지에서 자세히 설명하고 있네요.

http://code.google.com/intl/ko-KR/apis/maps/documentation/javascript/basics.html#Mobile

마지막으로 실제 예제들을 보면서 자신이 필요한 부분만 가져다 쓰는 것이 좋겠죠.
그래서 Sample Source를 다음 페이지에서 제공합니다.

http://code.google.com/intl/ko-KR/apis/maps/documentation/javascript/examples/index.html

저의 경우에는 모바일 환경에서 작은 이미지로 페이지를 호출하는 것이 필요해서 다음과 같이 컨트롤과 드래그 기능들을 모두 false로 설정해서 만들었습니다. 실행하는 화면은 다음과 같습니다.

위 화면을 만든 소스는 다음과 같으니 참고하시기 바랍니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

function initalize() {
    var mapOptions = {
      zoom: 15,
      center: new google.maps.LatLng(37.583732, 127.025256),
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
	  draggable: false
    }

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	var marker = new google.maps.Marker({map: map, position: map.getCenter()});
}
</script> 
<title> Google Map JavaScript API </title>
</head>
<body onload="initalize()">
	<div id="map_canvas" style="width: 280px; height: 120px; margin: 0 auto; top:50px; border: 1px solid black;"> </div>
</body>
</html>

'프로그래밍 > Web' 카테고리의 다른 글

GIS 지도 좌표계에 대한 정리~ (0)	2011.12.14
모바일 웹 사이트 제작을 위한 표준~ (0)	2011.11.28
PHP의 allow_url_fopen=off일때 URL 주소로 파일 읽어오기 (0)	2011.10.28
MySQL 테이블을 모두 삭제하는 PHP 소스~ (0)	2011.10.26
정규식으로 전화번호 형식 변경하기 (-포함해서 출력하기) (0)	2011.10.24

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

글 보관함

미니의 꿈꾸는 독서, 그리고 프로그래밍 이야기

티스토리 뷰

구글맵 javascript API v3에 대한 정리~

'프로그래밍 > Web' 카테고리의 다른 글

티스토리툴바