[Google Maps API v3 강좌 #1] 지도불러오기
2012-08-17
기초중의 기초, Hello World! 지도를 불러오는 방법에 대해 알아보겠습니다.
구글 맵 API를 불러와서 화면에 표시하는 가장 기초적인 자바스크립트 코드입니다.
위의 그림과 같이 웹페이지에 구글 지도가 표시되게 됩니다.
<!DOCTYPE html> // 이 문서의 type이 html이라고 선언합니다. <style type=”text/css”> html { height : 100% } // CSS 태그는 페이지의 스타일에 관여한다. 이 부분은 페이지에서 html과 body가 차지하는 크기, 그리고 Google maps가 들어갈 컨테이너인 map_canvas가 페이지에서 차지하는 크기를 기술하고 있다. <script type = “text/javascript” src = “http://maps.googleapis.com/maps/api/js?sensor=true“></script> // 위의 주소는 Google maps API의 링크이다. 이렇게 하면 저 링크에 있는 API의 모든 정의와 함수들을 불러와 사용할 수 있게 된다. 링크의 sensor=true 부분은 현재 사용자의 위치를 센싱하겠다 말겠다를 선언하는 부분이다. 위의 예시에서는 true라고 표시하여 현재 사용자의 위치를 불러들인다고 선언하였다. <script type = “text/javascript”> function initialize(){ var latlng = new google.maps.LatLng(37.5240220, 126.9265940); }; var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); } </script> // Google maps API의 객체 안에 변수값들을 설정함으로서 Map을 초기화한다. 위에서는 initialize()라는 함수를 만들어 초기화하는데 사용한다. google.maps.LatLng는 좌표 변수 type이다. 이 type으로 latlng라는 변수를 생성한다. myOptions라는 배열에 지도의 확대 정도(zoom), 지도의 중심 좌표(center), 지도의 형식에 관한 정보(mapTypeid)를 저장하여 맵의 설정 정보로 활용가능하다. mapTypeid는 ROADMAP(일반 2D 지도), SATELLITE(위성 사진), HYBRID(위성 사진과 도로명 등의 지명 표시), TERRAIN(등고선과 물의 흐름 표시)의 네 가지 종류가 있다. 이 설정 정보들을 초기화 한 후 밑과 같이 google.maps.Map type의 변수인 map을 위의 map_canvas 컨테이너와 위의 설정배열로 선언하면 된다. <body onload=”initialize()”> // 초기화 함수를 실행하면서 body 안의 map_canvas 컨테이너의 크기를 지정해준다. ——————————————————————————————-
[출처] [구글 지도(Google Maps API V3)]기초 중 기초: 지도 불러오기! Hello world | 작성자 SPH
|
Powered by Froala Editor
SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 제품군을 가지고 있으며, 고객의 사례에 꼭 맞는 무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다
