Google Maps API Coverage
* Countries
- 국가/도시/맵타일
- 지오코딩/스트릿뷰
- 트래픽/드라이빙/비지니스리스팅/도메인/바이킹
* Languages
v2 , v3 버전별 지원 언어 및 코드
링크 : https://spreadsheets.google.com/pub?key=p9pdwsai2hDMsLkXsoM05KQ&gid=1
스트릿뷰 샘플 소스입니다..
회사 앞으로 찾아봤는데 잘 나오네요
기본형에다가 해당 위경도 , 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>
현재 위치를 읽어와서 구글맵에 마커를 표시해주는 기능입니다.
Test Url : http://www.uhoon.co.kr/test/1208.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>getCurrentPosition + Googlemap marker </title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
<!--
function fnGetCurrentPosition() {
if (navigator.geolocation)
{
$("#latlng").html("");
$("#errormsg").html("");
navigator.geolocation.getCurrentPosition (function (pos)
{
lat = pos.coords.latitude;
lng = pos.coords.longitude;
$("#latlng").html("latitude : " + lat + "
longitude : "+ lng);
var mapOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(lat,lng)
};
map = new google.maps.Map(document.getElementById('map'),mapOptions);
var myIcon = new google.maps.MarkerImage("http://google-maps-icons.googlecode.com/files/restaurant.png", null, null, null, new google.maps.Size(17,17));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
draggable: false,
icon: myIcon
});
markers.push(marker);
},function(error)
{
switch(error.code)
{
case 1:
$("#errormsg").html("User denied the request for Geolocation.");
break;
case 2:
$("#errormsg").html("Location information is unavailable.");
break;
case 3:
$("#errormsg").html("The request to get user location timed out.");
break;
case 0:
$("#errormsg").html("An unknown error occurred.");
break;
}
});
}
else
{
$("#errormsg").html("Geolocation is not supported by this browser.");
}
}
//-->
</script>
</head>
<body>
<div id="errormsg"></div>
<div id="latlng"></div>
<input type="button" value="GetCurrentPosition " onclick="Javascript:fnGetCurrentPosition();" />
<div id="map" style="width:760px;height:400px;margin-top:20px;"></div>
</body>
</html>
getCurrentPosition 자세히 알아보기 : http://www.uhoon.co.kr/API/1200
