linuxism :: google maps

google maps - 기본

OpenSource/Map 2012. 12. 15. 10:19

[기본적인 Google Map 생성하기]

이제 기본적인 구글맵을 만들 준비가 됐습니다.

아래 예제는 대한민국 서울을 중심으로 잡은 구글맵을 보여줍니다.

<!DOCTYPE html>

<html>

<head>

</script>

function initialize()

{

var mapProp = {

center:new google.maps.LatLng(37.541,126.986),

zoom:5,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>

</body>

</html>

위의 예제 소스를 한줄 한줄 설명하도록 하겠습니다.

[왜 어플리케이션을 HTML5로 선언해야하지?]

<!DOCTYPE html>

대부분의 브라우저는 "표준모드(standards mode)"에서 doctype이 HTML5인 페이지를 랜더링합니다.

표준모드란 어플리케이션이 cross-browser를 준수(compliant)한다는 것을 뜻합니다.

만약 브라우저가 어플리케이션을 이해할 수 없으면 이를 무시하고 컨텐츠를 표시하기 위해서 호환모드(quirks mode; 관용모드, 비호환모드로 해석하기도 합니다)를 사용합니다.

Tip: 호환모드에서 작동하는 몇몇 CSS의 경우, 표준모드에서는 유효하지 않다는 점을 알고 있으세요.

퍼센트 기준으로 된 사이즈들은 부모 블럭 요소로부터 상속받아야 합니다.

만약 부모 블럭 요소 중에 어느 것이라도 사이즈가 지정된다면 0x0 픽셀로 설정됩니다.

퍼센트를 사용하려면 아래와 같이 <style> 선언을 include하세요.

html {height:100%}

body {height:100%; margin:0; padding:0}

#googleMap {height:100%}

</style>

이 style 선언은 맵 컨테이너(google map)가 HTML body 높이의 100%를 차지하게 한다는 것을 표시합니다.

[Google Maps API Key 추가하기]

위 예제소스에서 첫 번째 <script>태그는 필수이며, 이것은 Google Maps API를 인클루드시킵니다.

할당받은 API key(강좌 1의 마지막 부분)를 key 파라미터에 삽입하세요. (key=YOUR_API_KEY).

sensor 파라미터도 역시 필수입니다.

이것은 어플리케이션이 사용자의 위치를 판단하는 센서(GPS 센서같은..)를 사용하는지를 표시합니다. 이 값은 true 나 false 둘 중 하나로 설정합니다.

HTTPS

여러분이 만드시는 어플리케이션이 HTTPS를 사용한다면 아래처럼 HTTP 대신에 HTTPS로 Google Maps API를 설정하시면 됩니다.

비동기적으로 로딩하기

페이지 로딩이 끝나거나 요청이 있을 때 Google Maps API를 로딩하는 것도 가능합니다.

아래는 window.onload를 사용해서 페이지가 완전히 로드된 후에 Google Maps API를 불러오게 하는 예제입니다.

loadScript() 함수는 Google Maps API <script> 태그를 생성합니다.

또한, callback=initialize 파라미터를 URL 끝에 추가해서 initialize() 함수가 API 로딩 후에 실행하도록 합니다.

function loadScript()

{

var script = document.createElement("script");

script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyD4L5BMWzhMUfgloLbcAiF3DzUuZZuoFvo&sensor=false&callback=initialize";

document.body.appendChild(script);

}

window.onload = loadScript;

[속성설정하기]

지도를 초기화하기 위해서, 속성이 설정된 Map properties object를 먼저 생성해보겠습니다.

var mapProp = {

center:new google.maps.LatLng(37.541,126.986),

zoom:7,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

Center

center 속성은 어디를 맵의 중앙에 놓을지를 설정합니다.

특정 포인트에 맵의 중앙을 설정하기 위해서 LatLng 오브젝트를 생성합니다.

위도, 경도 순으로 설정합니다.

Zoom

zoom 속성은 맵의 초기 레벨을 설정합니다.

zoom:0 으로 설정하면 지구 전체를 보이게 합니다.

zoom 레벨이 높으면 맵을 더 줌인하게 됩니다.

MapTypeId

mapTypeId 속성은 맵 형태를 설정합니다.

설정가능한 맵 형태는 아래와 같습니다.

ROADMAP - 일반, 2D map

SATELLITE - 사진지도(photographic map)

HYBRID - 사진지도 + 도로명/도시명

TERRAIN - 산, 강 등으로 된 맵

[Google Map의 위치]

<div>엘리먼트는 Google Map을 고정시키고 보여줄 때 사용됩니다.

Note: 맵은 항상 맵이 속해있는 엘리먼트의 사이즈를 따라갑니다. 그렇기 때문에 <div> 엘리먼트로 맵의 크기를 설정하세요.

[Map Obect 생성하기]

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

위의 코드는 <div>엘리먼트 안에다 맵속성을 mapProp로 설정한 새 맵을 생성합니다.

Tip: 한 페이지에 여러 개의 맵을 생성하려면 그냥 새로운 map 오브젝트를 추가하기만 하면 됩니다.

아래 예제에서는 한 페이지에 4개의 맵을 설정했습니다.

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);

var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);

var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

[맵 로딩하기]

Map 오브젝트를 만드는 initialize() 함수를 실행합니다. 이때 맵은 페이지가 완전히 로딩된 후에 표시된다는 점을 기억하세요.

google.maps.event.addDomlistener(window, 'load', initialize);

※ 본문은 http://www.w3schools.com 의 GoogleMapsAPI강좌를 본인이 번역한 글입니다.

[출처] Google Maps Basic|작성자 기냥이

출처 - http://blog.naver.com/PostView.nhn?blogId=topsaga&logNo=140174794671

저작자표시

'OpenSource > Map' 카테고리의 다른 글

google maps - gif file animation 사용하기 (0)	2012.12.13
map - google maps api (0)	2012.10.26
구글어스 KML, 세계 표준으로 채택 (0)	2012.10.02
map - WGS84와 GRS80의 차이 (0)	2012.08.26
map - 국토지리정보원, 최신 항공사진 분기별 공개 및 Open API 서비스 실시 (0)	2012.08.26