[기본적인 Google Map 생성하기]
이제 기본적인 구글맵을 만들 준비가 됐습니다.
아래 예제는 대한민국 서울을 중심으로 잡은 구글맵을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD4L5BMWzhMUfgloLbcAiF3DzUuZZuoFvo&sensor=false">
</script>
<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>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
위의 예제 소스를 한줄 한줄 설명하도록 하겠습니다.
[왜 어플리케이션을 HTML5로 선언해야하지?]
<!DOCTYPE html>
대부분의 브라우저는 "표준모드(standards mode)"에서 doctype이 HTML5인 페이지를 랜더링합니다.
표준모드란 어플리케이션이 cross-browser를 준수(compliant)한다는 것을 뜻합니다.
만약 브라우저가 어플리케이션을 이해할 수 없으면 이를 무시하고 컨텐츠를 표시하기 위해서 호환모드(quirks mode; 관용모드, 비호환모드로 해석하기도 합니다)를 사용합니다.
Tip: 호환모드에서 작동하는 몇몇 CSS의 경우, 표준모드에서는 유효하지 않다는 점을 알고 있으세요.
퍼센트 기준으로 된 사이즈들은 부모 블럭 요소로부터 상속받아야 합니다.
만약 부모 블럭 요소 중에 어느 것이라도 사이즈가 지정된다면 0x0 픽셀로 설정됩니다.
퍼센트를 사용하려면 아래와 같이 <style> 선언을 include하세요.
<style type="text/css">
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를 인클루드시킵니다.
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
할당받은 API key(강좌 1의 마지막 부분)를 key 파라미터에 삽입하세요. (key=YOUR_API_KEY).
sensor 파라미터도 역시 필수입니다.
이것은 어플리케이션이 사용자의 위치를 판단하는 센서(GPS 센서같은..)를 사용하는지를 표시합니다. 이 값은 true 나 false 둘 중 하나로 설정합니다.
HTTPS
여러분이 만드시는 어플리케이션이 HTTPS를 사용한다면 아래처럼 HTTP 대신에 HTTPS로 Google Maps API를 설정하시면 됩니다.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
비동기적으로 로딩하기
페이지 로딩이 끝나거나 요청이 있을 때 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을 고정시키고 보여줄 때 사용됩니다.
<div id="googleMap" style="width:500px; height:380px;"></div>
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강좌를 본인이 번역한 글입니다.
출처 - http://blog.naver.com/PostView.nhn?blogId=topsaga&logNo=140174794671
convention02.html
