var app=angular.module('myapp', ['ngMap']);
app.controller('MyCtrl', function($scope , StreetView) {
var panorama, positions;
$scope.$on('mapInitialized', function(e, map) {
positions = [{lat:40.688738,lng:-74.043871}];
panorama = map.getStreetView();
//panorama.setPosition(map.markers[0].position);
panorama.setPosition(positions[0]);
google.maps.event.addListener(map, 'click', function() {
console.log("clicked me");
});
// $scope.latlong = panorama.getPosition();
$scope.povheading = panorama.getPov().heading;
$scope.povpitch = panorama.getPov().pitch;
$scope.latlong = panorama.getPosition();
$scope.linkList = panorama.getLinks();
});
$scope.toggle = function() {
panorama.setVisible(!panorama.getVisible());
}
$scope.showSVDetails = function(event , map) {
console.log( " Assumption this should be streetview panorama " +this );
$scope.latlong = panorama.getPosition();
$scope.panoid = panorama.getPanoId();
$scope.povheading = this.getPov().heading;
$scope.povpitch = this.getPov().pitch;
$scope.linkList = this.getLinks();
};
});
div[ng-controller=OverlayRemoveCtrl] {
position: relative;
}
div[ng-controller=OverlayRemoveCtrl] #panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -90px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
<!doctype html>
<html ng-app="myapp">
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather,visualization,panoramio"></script>
<script src="http://code.angularjs.org/1.2.25/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/app/scripts/services/street_view.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="css/dragdrop.css"> -->
<!--
<script src="../../app/scripts/services/street_view.js"></script>
<script src="../../app/scripts/directives/map_controller.js"></script>
<script src="../../app/scripts/directives/map.js"></script>
<script src="../../app/scripts/directives/marker.js"></script>
<script src="../../app/scripts/directives/shape.js"></script>
<script src="../../app/scripts/services/geo_coder.js"></script>
<script src="../../app/scripts/services/navigator_geolocation.js"></script>
<script src="../../app/scripts/services/attr2_options.js"></script>
-->
<link rel="stylesheet" href="style.css"/>
</head>
<body>
,
<!-- positions = [{lat:40.688738 ,lng:-74.043871}];
-->
<div class="container-fluid" ng-controller="MyCtrl" >
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12"> </div>
</div>
<div class="row" >
<div class="col-xs-3 col-sm-3 col-lg-3" style="background-color:lavender;">
<ui>
<li> LatLong Position : {{ latlong }} </li>
<li> POV Heading {{ povheading }} </li>
<li> POV Pitch {{ povpitch }} </li>
<li> Pano ID {{ panoid }} </li>
</ui>
<ui ng-repeat="links in linkList">
<il> Link {{$index}} {{ links.link }} </il>
</ui>
</div>
<div class="col-xs-9 col-sm-9 col-lg-9" style="background-color:lavenderblush;width:800px; height: 750px" id="street-view">
<map street-view="StreetViewPanorama(document.querySelector('#street-view'), {position:new google.maps.LatLng(40.688738,-74.043871)})" on-position_changed="showSVDetails(this)" on-pov_changed="showSVDetails(this)" on-links_changed ="showSVDetails(this)" >
<marker ng-repeat="pos in positions" position="{{pos.lat}}, {{pos.lng}}" draggable="true" on-position_changed="dragMarker(this)"></marker>
</map>
</div>
</div>
</div>
</body>
</html>