JqueryUI - Street View events

SUBMITTED BY: jlolk3r

DATE: Jan. 20, 2016, 6:20 a.m.

FORMAT: HTML

SIZE: 3.4 kB

Raw Download

HITS: 1276

Report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Street View events</title>
  6. <style>
  7. html, body {
  8. height: 100%;
  9. margin: 0;
  10. padding: 0;
  11. }
  12. #map {
  13. height: 100%;
  14. }
  15. #floating-panel {
  16. position: absolute;
  17. top: 10px;
  18. left: 25%;
  19. z-index: 5;
  20. background-color: #fff;
  21. padding: 5px;
  22. border: 1px solid #999;
  23. text-align: center;
  24. font-family: 'Roboto','sans-serif';
  25. line-height: 30px;
  26. padding-left: 10px;
  27. }
  29. #pano {
  30. width: 50%;
  31. height: 100%;
  32. float: left;
  33. }
  34. #floating-panel {
  35. width: 45%;
  36. height: 100%;
  37. float: right;
  38. text-align: left;
  39. overflow: auto;
  40. position: static;
  41. border: 0px solid #999;
  42. }
  43. </style>
  44. <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true"></script>
  45. </head>
  46. <body>
  47. <div id="pano"></div>
  48. <div id="floating-panel">
  49. <table>
  50. <tr>
  51. <td><b>Position</b></td><td id="position-cell">&nbsp;</td>
  52. </tr>
  53. <tr>
  54. <td><b>POV Heading</b></td><td id="heading-cell">270</td>
  55. </tr>
  56. <tr>
  57. <td><b>POV Pitch</b></td><td id="pitch-cell">0.0</td>
  58. </tr>
  59. <tr>
  60. <td><b>Pano ID</b></td><td id="pano-cell">&nbsp;</td>
  61. </tr>
  62. <table id="links_table"></table>
  63. </table>
  64. </div>
  65. <script>
  66. function initPano() {
  67. var panorama = new google.maps.StreetViewPanorama(
  68. document.getElementById('pano'), {
  69. position: {lat: 37.869, lng: -122.255},
  70. pov: {
  71. heading: 270,
  72. pitch: 0
  73. },
  74. visible: true
  75. });
  77. panorama.addListener('pano_changed', function() {
  78. var panoCell = document.getElementById('pano-cell');
  79. panoCell.innerHTML = panorama.getPano();
  80. });
  82. panorama.addListener('links_changed', function() {
  83. var linksTable = document.getElementById('links_table');
  84. while (linksTable.hasChildNodes()) {
  85. linksTable.removeChild(linksTable.lastChild);
  86. }
  87. var links = panorama.getLinks();
  88. for (var i in links) {
  89. var row = document.createElement('tr');
  90. linksTable.appendChild(row);
  91. var labelCell = document.createElement('td');
  92. labelCell.innerHTML = '<b>Link: ' + i + '</b>';
  93. var valueCell = document.createElement('td');
  94. valueCell.innerHTML = links[i].description;
  95. linksTable.appendChild(labelCell);
  96. linksTable.appendChild(valueCell);
  97. }
  98. });
  100. panorama.addListener('position_changed', function() {
  101. var positionCell = document.getElementById('position-cell');
  102. positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  103. });
  105. panorama.addListener('pov_changed', function() {
  106. var headingCell = document.getElementById('heading-cell');
  107. var pitchCell = document.getElementById('pitch-cell');
  108. headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
  109. pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  110. });
  111. }
  113. </script>
  114. <script
  115. src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initPano"
  116. async defer>
  117. </script>
  118. </body>
  119. </html>
comments powered by Disqus