-
google street view api panoid에 따라서 이미지 간헐적으로 안나오는 현상개발/개발관련 2019. 11. 28. 15:36반응형
1. google street view api가 간헐적으로 제대로 안나오는 현상
google street view api를 이용해서 360이미지를 보여주는데 어떤 사진은 나오고 어떤사진은 안나오는 현상이 발생했다.
찾아보니 저작권 소유가 google인건 잘 나오는데, 개인이 찍어서 올린 360이미지는 안나왔다.
panoId는 콘솔창에서 아래 코드를 넣고 엔터치면 나온다.
"F:".concat(window.location.href.split("!1s")[1].split("!2e")[0]).replace('%2F','/')<style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } #street-view { height: 100%; } </style> <body> <div id="street-view"></div> </body> <script type="text/javascript"> var panoId = 'F:AF1QipPqXCrY1HU1VGdCEmg1MSfSzjM8stU-Jzln3FEM'; var panorama; function initialize() { panorama = new google.maps.StreetViewPanorama( document.getElementById('street-view'), { //position: {lat: 37.869260, lng: -122.254811}, pov: {heading: 165, pitch: 0}, zoom: 1 }); panorama.setPano(panoId); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=나의API_KEY&callback=initialize"> </script>위와같이 하면 검은 화면에 360이미지가 안뜬다.
대신 panoId에 구글저작권인 id를 넣으면 나온다
var panoId = 'faGD2ttSy8EroNhM4_wm6w';구글링 해봐도 제대로 나온 답변이나 글이 없었다. 대신 panoid 대신 location으로 경도, 위도 넣고 구현을 해봤다. (같은 위치 같은 360사진으로)
2. panoid 얻는 방법
구글에서 panoid 형식이 중간에 한번 바뀌었다고 한다. 간간히 이 부분에 대해서 버그가 있다는 글이 있어서 혹시나 해서 panoid 대신 location으로 진행해봐야겠다고 생각했다.
주소창 치는 곳에 하단의 소스 코드를 넣으면 해당 위치 360이미지에 대한 정보가 나온다.
https://maps.googleapis.com/maps/api/streetview/metadata?size=600x300&location=37.5145979,127.0467143&pitch=42&fov=110&key=AIzaSyBbB90Uyprq8Gx0PbU7Ky5w6B8JgI80d5g위 url에서 location 부분 대신 pano=panoid 넣어도 정보가 나온다.
그런데 여기서 location으로 panoid를 찾으면 기존에 콘솔창에서 찾던 panoid와 다른값이 나온다.
내 생각엔 panoid 형식이 바뀌면서 옛날 방식과 지금 방식이 인터넷에 섞여서 돌아다니는 것으로 생각된다.
url에 쳐서 정보를 얻는 것이 정확하다고 판단된다.
3. location->panoid를 이용한 google street view로 360 이미지 띄우기
2번과 같이 location으로 panoid를 찾아서 스크립트에 넣어주면 제대로 잘 뜬다.
<style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } #street-view { height: 100%; } </style> <body> <div id="street-view"></div> </body> <script type="text/javascript"> //var panoId = 'F:AF1QipPqXCrY1HU1VGdCEmg1MSfSzjM8stU-Jzln3FEM'; //크롬콘솔에서 panoid찾은 값 var panoId = 'CAoSLEFGMVFpcFBRQjZxOUlJWU44X3dFeTRXSGZRYWxoRVFEWDJyclBzeU82cWpF'; //주소창에서 location을 이용해 panoid 찾은 값 var panorama; function initialize() { panorama = new google.maps.StreetViewPanorama( document.getElementById('street-view'), { //position: {lat: 37.869260, lng: -122.254811}, pov: {heading: 165, pitch: 0}, zoom: 1 }); panorama.setPano(panoId); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=나의API_KEY&callback=initialize"> </script>위 소스에서 panoid가 2갠데, 하나는 크롬콘솔에서 panoid 찾는 방법으로 나온 값이고, 다른 하나는 주소창에 location으로 경도, 위도 넣어서 찾은 panoid값이다.
둘다 같은 구글맵 스트리트 뷰에서 가져왔다.
밑에 사진처럼 같은 위치인데 어떤 방식으로 panoid를 가져왔냐에 따라 달라진다.
구글 스트리트 뷰가 안나오는 현상 (크롬 콘솔에서 panoid 찾는 방법) 
구글 스트리트 뷰에서 제대로 나오는 화면 (url에서 위도, 경도를 이용해 panoid 찾는 방법) 4. 결론
처음엔 구글과 개인이 올린 사진의 저작권 문제때문에 안나오는건줄 알았다.
정확하진 않지만, 테스트 결과, panoid형식이 중간에 바뀌었고, 크롬콘솔창에서 panoid 찾는 방법은 옛날 방법으로 옛날 형식의 panoid를 출력해주는 것 같았다. 구글이 찍은 스트리트뷰는 예전 panoid와 현재 panoid가 매칭이 되지만, 개인이 올린 사진은 매칭이 제대로 안되는것 같다.
그래서 url로 location을 넣어서 나오는 panoid를 이용해 google street view api에 사용해야 할 것 같다.
반응형'개발 > 개발관련' 카테고리의 다른 글
panolens threejs cache 미리 다운받기 (0) 2019.12.23 letsencrypt 인증서 갱신하기 (0) 2019.12.20 자바로 ip 출력하기 (0) 2019.11.26 자바로 메일 보내기 (0) 2019.11.19 xss 공격 보안 (0) 2019.11.18 댓글