YesYo.com MintState Forums  
뒤로    YesYo.com MintState BBS > Tech > Ajax & Issue
검색
멤버이름  오토
비밀번호 
 

 
작성일 : 09-03-18 13:13
Google Maps API
 글쓴이 : MintState
조회 : 14,088  
Google Maps API

본 내용은 http://www.joinc.co.kr/modules/moniwiki/wiki.php/Site/Google/Service/GoogleMapAPI 을 정리한 것입니다.

Google Map을 사용하기 위해서는 Map Key를 발급 받아야 합니다.
Key는 http://www.google.com/apis/maps 에서 받으실 수 있습니다.

Google Map은 우선 google Maps Javascript를 명시해야 합니다. 이때 발급 받은 Map Key를 적으시면 됩니다.
<script src="http://maps.google.co.kr/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>



1. 기본
구글 Map을 불러오기 위한 가장 기본이 되는코드다. 서울주변을 보여준다.
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);


setCenter을 이용해서 보여줄 위치를 지정한다. 첫번째 인자는 좌표를 지정하기 위해서 사용한다. 두번째 인자는 지도의 해상도를 결정하기 위해서 사용한다. 숫자가 클 수록 더 자세한 결과를 보여준다.

예제 : simple.html

구글 맵은 맵, 위성, 합성의 3가지 모드를 제공된다. setMapType메서드를 이용하면 모드를 변경할 수 있다. 따로 지정하지 않을 경우 모드로 실행된다.
  • setMapType(G_SATELLITE_TYPE) : 위성모드
  • setMapType(G_HYBRID_TYPE) : 합성모드



2. Map에서의 이동
다음은 맵에서 중심을 이동하는 예제다. panTo 메서드를 이용하면 해당 중심으로 지도를 부드럽게 이동시킨다. 길찾기등의 기능구현에 유용하게 사용할 수 있을 거 같다.
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);
window.setTimeout(function() {
    map.panTo(new GLatLng(42.615527631349245, 128.353515625));
}, 2000);


예제 : animate.html


3. Control 버튼 추가하기
맵을 확대기시커나 모드를 바꾸거나 하는등의 제어를 위한 컨트롤 버튼을 추가한다.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);


예제 : control.html


4. Event Listener
event listener는 GEvent.addListener를 호출해서 생성한다. 이것은 맵에서 발생하는 이벤트를 알려준다. 아래의 예제에서 맵을 움직일 경우 변경된 좌표가 출력되는걸 확인할 수 있을 것이다.
var map = new GMap2(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
	var center = map.getCenter();
	document.getElementById("message").innerHTML = center.toString();
});
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);


예제 : event.html


5. 정보창 열기
openInfoWindow를 이용하면 원하는 지역에 DOM정보를 출력할 수 있다. 다음은 맵중앙에 "저는 여기에 살아요"메시지를 출력하는 코드다.
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);
map.openInfoWindow(map.getCenter(), document.createTextNode("저는 여기에 살아요"));


예제 : infowindow.html


6. 맵에 표시하기
이번 예제는 overlay기능을 이용해서 지도에 랜덤하게 10개의 마크를 표시한다. 마크에 사용되는 이미지는 기본 이미지이며, 사용자 정의 아이콘을 만들 수도 있다. 일본의 동경시를 기준으로 예제를 만들었다.
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();

// 랜덤 포인트를 만들고 각각의 포인트에 마킹을 한다.
for (var i = 0; i < 10; i++) {
	var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
	map.addOverlay(new GMarker(point));
}
// 랜덤 포인트를 만들고 이것을 연결한다. 
var points = [];
for (var i = 0; i < 5; i++) {
	points.push(new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
	return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));


예제 : overlay.html


7. 클릭 이벤트 제어
맵에 클릭을 할경우 이벤트를 받아서 마킹을 하는 예제다. 앞서 배웠던 addListenr메서드를 이용해서 click 이벤트를 기다리고, 클릭이 발생하면 addOverlay메서드를 이용해서 마킹을 한다.
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);
GEvent.addListener(map, "click", function(marker, point) {
	if (marker) {
		map.removeOverlay(marker);
	} else {
		map.addOverlay(new GMarker(point));
	}
});


예제 : click.html


8. 마커에 정보 창 출력하기
10개의 마커를 랜덤하게 표시하고, 마커를 클릭하면 클릭이벤트에 대한 Listener가 작동하도록 해보자. Listener 함수는 openInfoWindowHtml메서드를 이용해서 정보창을 출력한다.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);
function createMarker(point, number) {
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");
	});
	return marker;
}

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
	var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
	map.addOverlay(createMarker(point, i + 1));
}


예제 : markerinfo.html


9. 탭 사용하기
openInfoWindowsTabs메서드 와 GInfoWindowTab클래스를 이용하면, 탭을 제어할 수 있다. 다음 예제는 마커를 클릭하면 2개의 tab을 가진 Info Windows를 띄운다.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var infoTabs = [
new GInfoWindowTab("탭1", "안녕하세요.<br><img src=http://www.joinc.co.kr/images/joinc.png border=0>"),
new GInfoWindowTab("탭2", "반갑습니다.")
];

var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);

예제 : tab.html

10. 사용자 정의 아이콘 사용하기
사용자 정의 아이콘을 사용하는 예제다. 아이콘은 구글에서 제공하는 mini marker이미지들을 사용하기로 했다. 완전한 사용자 정의 아이콘을 만들기 위해서는 원본이미지와 함께 그림자 이미지가 쌍으로 준비되어야 한다.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

// 10개의 랜덤위치를 찾아서 marking한다.
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
	var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
	map.addOverlay(new GMarker(point, icon));
}



예제 : icon.html


11. 아이콘 클래스 사용하기
지도서비스를 하게 된다면, 여러개의 아이콘들이 사용될 것이다. GIcon클래스를 이용하면 아이콘을 쉽게 관리할 수 있다.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// 아이콘에서 사용할 이미지/그림자 이미지, Info Windows등 객체의 
// 속성을 결정한다.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

function createMarker(point, index) {
	// Create a lettered icon for this point using our icon class
	var letter = String.fromCharCode("A".charCodeAt(0) + index);
	var icon = new GIcon(baseIcon);
	icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
	var marker = new GMarker(point, icon);

	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml("지역 <b>" + letter + "</b>");
	});
	return marker;
}

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
	var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
	map.addOverlay(createMarker(point, i));
}


예제 : iconclass.html


12. 마커 드래그
마커는 클릭, 다른장소로의 드래그 등이 가능한 상호작용하는 객체다. 이 예제는 맵에서 마커를 클릭하고 드래그하는 이벤트를 처리하는 방법을 알려준다. 드래그는 click, dragstart, drag, dragend의 4가지 타입의 이벤트를 발생한다.
var map = new GMap2(document.getElementById("map"));
var center = new GLatLng(37.51025350131836, 127.06023216247559);
map.setCenter(center, 16);
map.setMapType(G_SATELLITE_MAP);

var marker = new GMarker(center, {draggable: true});

GEvent.addListener(marker, "dragstart", function() {
	map.closeInfoWindow();
});

GEvent.addListener(marker, "dragend", function() {
	map.openInfoWindowHtml("여기를 약속장소로..."); 
});

map.addOverlay(marker);


예제 : drag.html


13. SideBar를 통한 맵 링크
Google Map에서 검색을 해보면 지도 옆에 SideBar를 통해서 맵을 제어하는 걸 볼수 있다. 여기에서는 SideBar를 이용해서 map을 제어하는 방법에 대해서 알아보겠다.
// 이 변수에 side bar에 이벤트가 발생했을 때 출력할 HTML코드가 저장된다.
var side_bar_html = "";

// side bar에는 여러개의 마커에 대한 HTML요소가 사용될 수 있으므로
// 배열로 정의 된다.
var gmarkers = [];
var htmls = [];
var i = 0;
/*
var map = new GMap2(document.getElementById("map"));
var center = new GLatLng(37.51030456483467, 127.05190658569336);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(center, 14);
*/

function createMarker(point, name, html) {
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
	gmarkers[i] = marker;
	htmls[i] = html;
	side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
	i++;
	return marker;
}

function myclick(i) {
	gmarkers[i].openInfoWindowHtml(htmls[i]);
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.51030456483467, 127.05190658569336),14);
map.setMapType(G_SATELLITE_MAP);

// 테스트에 사용할 point를 만들자.
var point = new GLatLng(37.508500299402435, 127.06263542175293);
var marker = createMarker(point, "반디엔 루인스", "제가 애용하는 서점 입니다");
map.addOverlay(marker);

var point = new GLatLng(37.50209991181568, 127.03652143478394);
var marker = createMarker(point, "시티문고", "가끔 강남에 갈일이 있으면 시간을 때우는 장소로..");
map.addOverlay(marker);

var point = new GLatLng(37.517802011991854, 127.0405125617981);
var marker = createMarker(point, "로터리 오락실", "드럼메니아 V2때문에 갑니다");
map.addOverlay(marker);

var point = new GLatLng(37.5056235973398, 127.0512306690216);
var marker = createMarker(point, "onnet", "제가 다니는 회사지요");
map.addOverlay(marker);

// <div> side_bar에 side_bar_html 문서를 배치한다. 
document.getElementById("side_bar").innerHTML = side_bar_html;


예제 : sidebar.html


14. XML과 비동기 HTTP를 이용한 지도 생성
이번 예제는 경도/위도와 지역정보를 포함한 async_data.xml을 다운로드 받아서, 지도에 마커를 표시한다. GDownloadUrl메서드를 이용해서 파일을 다운로드 받을 수 있다. 다운로드 받은 XML파일은 GXml메서드를 이용해서 처리한다. 마커를 클릭하면 지역정보가 표시된다.
function load() {
	var map = new GMap2(document.getElementById("map"));
	var center = new GLatLng(37.51030456483467, 127.05190658569336);
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(center, 14);
	map.setMapType(G_SATELLITE_MAP);

	function createMarker(point, name) {
		var marker = new GMarker(point);
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml("<b>" + name + "</b>");
		});
		return marker;
	}

	GDownloadUrl("async_data.xml", function(data, responseCode) {
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++) {
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
			map.addOverlay(new GMarker(point));
			map.addOverlay(createMarker(point, markers[i].getAttribute("name")));
		}
	});
}


다음은 async_data.xml의 내용이다.


예제 : async.html


* 관련 링크
http://mapki.com
http://econym.org.uk/gmap/ -> 위의 예제가 거의다 이 사이트에 존재 합니다.


==================================================================================
* 예제 모음
Map Search Wizard - Put a Searchable Map on Your Web Page 는 쉽게 자신의 홈페이지에 Google Map을 달 수 있도록 코드를 생성해 줍니다.
SearchWizard.html
첨부 파일
파일 종류: rar GoogleMaps_예제.rar (12.3K, 31 views)
파일 종류: html SearchWizard.html (2.1K, 19 views)
Rated 5.0/5 (100%) (1 Votes)

(\__/)
(='.'=)
(")_(")~
Search Infomation by MintState
MintState

boky1000 10-09-28 16:36
 
안녕하세요!! 위에 정리하신거 보구 많은 도움이 되었습니다.

초면에 죄송하지만 질문 두가지만 드리겠습니다!!

현재 구글맵에서 오픈 소스를 통해서 제가 구현할수 있는 부분까지는 구현을 하였습니다.

저는 모바일웹으로 구현해서 위와 같이 자바스크립트로 했구요 확인은 iphone으로 제 컴퓨터 ip에 접속하여 확인을 한답니다

질문은 만약 GPS와 연동에 관해서인데 제가 구현하고 하는 화면을 실행시 제가 있는 현위치를 표시 하고자 합니다.

자신의 위치추적 부분에서  sensor=true은 GPS연동여부를 묻는것으로 알고있는데 이것만 설정해 주면 iphone으로 확인시 GPS가 가동이 되는지요

만약 연동이 된다고하고 진행 한다면 GPS로 받오 값(위도값, 경도값)을 어떻게 받아와야 하는지에 대해서도 궁금 합니다

GPS으로 연동되어 값(위도값, 경도값)을 받아서 어떻게 적용되어야 하는지 고민하고 있습니다.

번써 3일째 밤을 새가며 고민고민하고 있습니다 도와주세요~~!!ㅠ.ㅜ
 
 

Total 32
번호 제   목 글쓴이 날짜 조회
32 Swiper - Most Modern Mobile Touch Slider MintState 02-02 1513
31 [jquery] 스와프 가능한 이미지 배너 - OWL Carousel MintState 05-30 2837
30 구글맵 api 편리하기 사용가능하게 해주는 gmaps.js MintState 03-04 4322
29 jQuery - FullCalendar MintState 03-21 5916
28 jquery - select box MintState 11-25 5884
27 Wowza Streaming Server MintState 09-19 7650
26 jQuery Datepicker MintState 06-23 6766
25 Using the Twitter Search API MintState 06-01 4729
24 Twitter Search using the Twitter API and PHP MintState 06-01 5404
23 PHP Twitter Search API MintState 06-01 5289
22 모바일(iOS 용) 터치 관련 jQuery 플러그인 MintState 04-18 6332
21 GEO <-> KATEC 변환 MintState 02-21 5514
20 Twitter API 링크 MintState 07-13 7758
19 jQuery Simple WYSIWYG Editor MintState 07-02 8231
18 Prototype.js 의 Object 객체의 메소드 MintState 01-19 6540
17 prototype.js 를 이용한 JSON사용 예제 MintState 01-19 10460
16 php 내장함수을 이용한 XML Parser MintState 08-27 8452
15 XML 파싱(xml2array) MintState 08-27 8094
14 ajax의 xml을 javascript 객체형식으로 자동 변환 MintState 07-07 8364
13 Google Maps API (1) MintState 03-18 14089
 1  2  
모바일 버전으로 보기
CopyRight ©2004 - 2017, YesYo.com MintState. ™