웹페이지에서 구글맵 구현

자바(JAVA)

웹페이지에서 구글맵 구현

개발환경 : window 7 64bit, Eclipse Kepler, Android 4.2.2

1. 구글맵키 받기

구글맵을 사용하기 위해서는 구글로부터 정보를 받아야 하는데 인증과정을

거쳐야한다. 아래 사이트로 가서 API key 를 받아야 하는데 사이트 URL 을

넣고 Generate 버튼을 눌러 생성하면된다. URL 대신 IP 도 가능하다.

http://code.google.com/intl/ko-KR/apis/maps/signup.html

생성된 Key 를 Sample 에 나와 있는것처럼 삽입해서 쓰면된다.

구글맵 데이터를 받아올 준비는 되었다. 구글에서는 많은 Map 관련 예제들을 테스트 해볼수있는

Playground 라는 곳을 만들어 두었다. 이곳에 들어가면 다양한 예제와 구현되었을 때의

결과값을 아래쪽에 보여줌으로서 개발자들을 위한 편의를 제공하고 있다.

참고할만한 간단한 예제들입니다.

- 맵이동 : panTo 함수를 이용해 지역을 이동

<script language="JavaScript" type="text/javascript">
function load() 
{
	var map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(37.508500299402435, 127.06263542175293), 13);
	window.setTimeout(function() {
		map.panTo(new GLatLng(37.48575600784826, 126.990966796875));
	}, 2000);
}
</script>	
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 340px"></div>
  </body>
</html>

- 컨트롤 보이기

function load() 
{
	var map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(37.51030456483467, 127.05190658569336), 13);
}

- 지도가 이동할 때 좌표아래에 표시

<script language="JavaScript" type="text/javascript">
function load() 
{
	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);
}
</script>	
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 340px"></div>
    <div id="message"></div>
  </body>
</html>

- 마크를 위한 정보풍선창 열기

<script language="JavaScript" type="text/javascript">
function load()
{
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.506900253948835, 127.02714443206787), 15);
  map.openInfoWindow(map.getCenter(),
                   document.createTextNode("저여기 살아요"));
}
</script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 340px"></div>
  </body>
</html>

- 맵에 아이콘으로 특정위치를 표시하기

<script language="JavaScript" type="text/javascript">
function load() 
{
	var map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(37.508261996934, 127.05933094024658), 13);
// Add 10 markers in random locations on the map
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));
}

// Add a polyline with five random points. Sort the points by
// longitude so that the line does not intersect itself.
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));
}
</script>	
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 340px"></div>
  </body>
</html>

- 클릭한 위치 마크 표시하기

<script language="JavaScript" type="text/javascript">
function load() 
{
	var map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(37.51030456483467, 127.05190658569336), 15);
	GEvent.addListener(map, "click", function(marker, point) {
  if (marker) {
    map.removeOverlay(marker);
  } else {
    map.addOverlay(new GMarker(point));
  }
});
}

</script>	
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 340px"></div>
  </body>
</html>

- 표시된 마커에 정보창 표시하기

<script language="JavaScript" type="text/javascript">
function load() 
{
	var map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(37.51030456483467, 127.05190658569336), 15);
	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));
	}
}
</script>	
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 340px"></div>
  </body>
</html>

- 마크업다른이미지 표시

<script language="JavaScript" type="text/javascript">
function load() 
{
	var map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(37.508261996934, 127.05933094024658), 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°³G •£´�¦ ã¾Ƽ 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));
	}
}
</script>	
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 340px"></div>
  </body>
</html>

- 마크된 아이콘 이름 제어하기

<script language="JavaScript" type="text/javascript">
function load() 
{
	var map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(37.508261996934, 127.05933094024658), 13);

	// ¾ǀ̈́ܿ¡¼ »耫Ȓ L¹́�¸²Z L¹́�nfo Windowsµ젰´üG 
	// ¼Ӽº; °⁤ȑ´׮
    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));
    }
}
</script>	
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 340px"></div>
  </body>
</html>

- 마크를 끌어서 드래그 하는 기능

<script language="JavaScript" type="text/javascript">
function load() 
{
	var map = new GMap2(document.getElementById("map"));
	var center = new GLatLng(37.51025350131836, 127.06023216247559);
	map.setCenter(center, 16);
	var marker = new GMarker(center, {draggable: true});
	GEvent.addListener(marker, "dragstart", function() {
  		map.closeInfoWindow();
	});
	GEvent.addListener(marker, "dragend", function() {
		marker.openInfoWindowHtml("드래그");
	});
	map.addOverlay(marker);
}
</script>	
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 340px"></div>
  </body>
</html>

- 실시간으로 마커 xml 데이터를 가져와 지도와 동기화 시켜준다.

<script language="JavaScript" type="text/javascript">
var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;

function myclick(i)
{
    gmarkers[i].openInfoWindowHtml(htmls[i]);
}
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);

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

	GDownloadUrl("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(createMarker(point, markers[i].getAttribute("name"), markers[i].firstChild.nodeValue));
		}
    document.getElementById("side_bar").innerHTML = side_bar_html;
	});

}
</script>	
  </head>
  <body onunload="GUnload()">
    <div id="map" style="width: 600px; height: 340px"></div>
		<div id="side_bar"></div>
		<img src=../images/eyes.gif height=0 width=0 onload=javascript:load()>
		<div>원본데이터 : <a href=data.xml>data.xml</a></div>
  </body>
</html>

2. 구글 Ajax API 를 이용해 현재 컴퓨터 IP 로 위치값 받아오기

먼저사용하기 위해서는 환경설정이 필요한데 무료로 인증키를 받아서 구현하고자

하는 페이지 상단에 스크립트를 집어 넣는다.

이 AJAX API 로더를 사용하는 경우 로더는 클라이언트의 IP 주소를 바탕으로 클라이언트의

위치를 찾아내려고 시도한다. 이 프로세스가 성공하면 메트로 레벨로 범위가 지정된

클라이언트의 위치를 google.loader.ClientLocation 속성에서 사용 가능하게 됩니다.

프로세스가 일치 값을 찾지 못하면 이 속성은 널로 설정된다. 이 값이 채워지면

google.loader.ClientLocation 개체는 다음과 같은 메트로 레벨 세분화 속성으로 채워진다.

ClientLocation.latitude - 클라이언트의 IP 주소와 연관된 저해상도 위도를 제공합니다.

ClientLocation.longitude - 클라이언트의 IP 주소와 연관된 저해상도 경도를 제공합니다.

ClientLocation.address.city - 클라이언트의 IP 주소와 연관된 도시 이름을 제공합니다.

ClientLocation.address.country - 클라이언트의 IP 주소와 연관된 국가 이름을 제공합니다.

ClientLocation.address.country_code - 클라이언트의 IP 주소와 연관된 ISO 3166-1 국가 코드 이름을 제공합니다.

ClientLocation.address.region - 클라이언트의 IP 주소와 연관된 국가의 특정 지역을 제공합니다.

저작자표시

'자바(JAVA)' 카테고리의 다른 글

자바(Java) AWT – List 컨트롤 구현 방법과 예제 (0)	2014.11.30
자바(Java) AWT – Checkbox 컨트롤 사용법과 예제 (4)	2014.11.27
자바(Java) 웹페이지에 접속해서 html 소스 긁어 오기위한 방법 (2)	2014.11.20
자바스크립트(javascript) 배열로 구성하여 input 객체에 넣고 POST 넘겼을때 (4)	2014.09.18
Java 에서 Exception 의 내용을 추출하고 싶을 때 (1)	2014.02.12
[Java] 자바 데이터베이스 연동, 오라클(Oracle), MySQL DB 연결 테스트 (0)	2014.02.09
Java 에서 날짜 더하기 (0)	2014.02.08
자바 Junit 기능중 타임 아웃 테스트 하기 (0)	2013.10.27

Posted by 녹두장군1

웹페이지에서 구글맵 구현

'자바(JAVA)' 카테고리의 다른 글

카테고리

티스토리툴바