Google API GeoRSS 피드에서 KmlLayer를 생성..." geoRSS 로 레이어 마커 찍기 "

Open API/Google|2016. 11. 22. 16:35
반응형




GeoRss 포맷을 이용해서 레이어 마커를 생성하는 예제입니다..


TestUrl : http://www.uhoon.co.kr/test/1972.html


Google API Url : https://developers.google.com/maps/documentation/javascript/layers?hl=ko



용어 : 


* KML ( wiki 에서 : KMLViewer )
- 키홀 마크업 언어(Keyhole Markup Language, KML)은 구글 어스, 구글 지도 및 기타 응용 프로그램에 쓰이는 XML 기반의 마크업 언어 스키마이다.



*GeoRSS ( wiki 에서 : GeoRSSViewer )

- 위치를 인코딩하기위한 새로운 표준 웹 피드 





<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>GeoRSS Layers</title>
	<style type="text/css">
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#map-canvas, #map_canvas {
			height: 100%;
		}
		@media print {
			html, body {
				height: auto;
			}
			#map-canvas, #map_canvas {
				height: 650px;
			}
		}
		#panel {
			position: absolute;
			top: 5px;
			left: 50%;
			margin-left: -180px;
			z-index: 5;
			background-color: #fff;
			padding: 5px;
			border: 1px solid #999;
		}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
		function initialize() {
			var myLatlng = new google.maps.LatLng(49.496675, -102.65625);
			var mapOptions = {
				zoom: 4,
				center: myLatlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			}
			var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
			var georssLayer = new google.maps.KmlLayer({
				url: 'http://www.uhoon.co.kr/test/1972/georss.xml'
			});
			georssLayer.setMap(map);
		}
		google.maps.event.addDomListener(window, 'load', initialize);
	</script>
</head>

<body>
	<div id="map-canvas"></div>
</body>

</html>


저작자표시

댓글()

Google API 구글맵 API 적용범위 (Google Maps API Coverage)

Open API/Google|2016. 11. 22. 16:32
반응형




Google Maps API Coverage


* Countries

- 국가/도시/맵타일

- 지오코딩/스트릿뷰

- 트래픽/드라이빙/비지니스리스팅/도메인/바이킹


* Languages

v2 , v3 버전별 지원 언어 및 코드

 

링크 : https://spreadsheets.google.com/pub?key=p9pdwsai2hDMsLkXsoM05KQ&gid=1


저작자표시

댓글()

google API 스트릿뷰 Street View

Open API/Google|2016. 11. 22. 16:30
반응형



스트릿뷰 샘플 소스입니다..


회사 앞으로 찾아봤는데 잘 나오네요 


기본형에다가 해당 위경도 , POV 값을표기하는 내용 추가했습니다.


API Url : https://developers.google.com/maps/documentation/javascript/streetview?hl=ko


Test Url : http://source.uhoon.co.kr/test/1957.html






<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Street View service</title>
	<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
		function initialize() {
			var fenway = new google.maps.LatLng(
				37.569303, 126.97943099999998);
			var mapOptions = {
				center: fenway,
				zoom: 14,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			var map = new google.maps.Map(
				document.getElementById(
					'map-canvas'), mapOptions);
			var panoramaOptions = {
				position: fenway,
				pov: {
					heading: 34,
					pitch: 10
				}
			};
			var panorama = new google.maps.StreetViewPanorama(
				document.getElementById('pano'),
				panoramaOptions);
			map.setStreetView(panorama);
			google.maps.event.addListener(
				panorama, 'links_changed', function () {
					var linksTable = document.getElementById(
						'links_table');
					while (linksTable.hasChildNodes()) {
						linksTable.removeChild(linksTable
							.lastChild);
					};
					var links = panorama.getLinks();
					for (var i in links) {
						var row = document.createElement(
							'tr');
						linksTable.appendChild(row);
						var labelCell = document.createElement(
							'td');
						labelCell.innerHTML = '<b>Link: ' +
							i + '</b>';
						var valueCell = document.createElement(
							'td');
						valueCell.innerHTML = links[i].description;
						linksTable.appendChild(labelCell);
						linksTable.appendChild(valueCell);
					}
				});
			google.maps.event.addListener(
				panorama, 'position_changed',
				function () {
					var positionCell = document.getElementById(
						'position_cell');
					positionCell.firstChild.nodeValue =
						panorama.getPosition() + '';
				});
			google.maps.event.addListener(
				panorama, 'pov_changed', function () {
					var headingCell = document.getElementById(
						'heading_cell');
					var pitchCell = document.getElementById(
						'pitch_cell');
					headingCell.firstChild.nodeValue =
						panorama.getPov().heading + '';
					pitchCell.firstChild.nodeValue =
						panorama.getPov().pitch + '';
				});
		}
		google.maps.event.addDomListener(
			window, 'load', initialize);
	</script>
</head>

<body>
	<div id="map-canvas" style="width: 400px; height: 300px"></div>
	<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
	<div id="panoInfo" style="width: 45%; height: 100%;float:left">
		<table>
			<tr>
				<td><b>Position</b>
				</td>
				<td id="position_cell"> </td>
			</tr>
			<tr>
				<td><b>POV Heading</b>
				</td>
				<td id="heading_cell">270</td>
			</tr>
			<tr>
				<td><b>POV Pitch</b>
				</td>
				<td id="pitch_cell">0.0</td>
			</tr>
			<tr>
				<td><b>Pano ID</b>
				</td>
				<td id="pano_cell"> </td>
			</tr>
			<table id="links_table"></table>
		</table>
	</div>
</body>

</html>




저작자표시

댓글()
이전 1 2 3 4 5 6 7 다음

티스토리툴바