example/bing-venue-map-directive.html

<!DOCTYPE HTML>
<html>
    <head>
        <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>

        <script src="../dist/angular-bing-maps.js"></script>
        <!--
        
        Author: Gavin Barron (Intergen Ltd)
        Websites: http://gavinb.net & http://teamintergen.com
        Date: June 6th, 2015
        Description: This directive allows users to easily leverage the Bing Venue Maps in their AngularJS applications.
                    This directive also allows for the ability to select a specific room/item in the veune this could 
                    be passed as a route paramter and set on the directive by controller.
        -->

        <script type="text/javascript">
            var app = angular.module('angularBingMapExample', ['angularBingMaps']);
            app.controller('ExampleController', function($scope, $http) {

                /*<venue-map> directive options*/
                $scope.mapOptions = {};
                $scope.mapOptions.center = {latitude: 30.614919,longitude: -96.342316};
                $scope.mapOptions.zoom = 6;
                $scope.mapOptions.mapType = 'a';
                $scope.mapOptions.venue = 'bingmapsteam-mccormickplace';
                $scope.mapOptions.credentials = 'AkaxzD5YOJCbIvziHVOLfm6AkeM5Z5UQ3dHS53mQzwK-6LGWnxYjAwNqfe3D4UBT';
                // Typically you should inject $routeParams into the controller and read the room name from a route parameter;
                // Just leave unset if you don't want a room selected
                $scope.mapOptions.room = 'Exhibition Hall A1' 

            });
        </script>

        <style type="text/css">
            venue-map {
                height: 100%;
                width: 100%;
            }
            .directory{
                height: 100%;
                width: 25%;
                padding: 5px;
            }
            .map{
                height: 100%;
                width: 74.5%;
                position: fixed;
                right: 0;
                top: 0;
                bottom: 0;
            }
        </style>

    </head>
    <body ng-app="angularBingMapExample">

        <div class="bing-map-container" ng-controller="ExampleController">
            <venue-map center="mapOptions.center"
                       credentials="mapOptions.credentials"
                       zoom="mapOptions.zoom"
                       venue="mapOptions.venue"
                       room="mapOptions.room">
            </venue-map>
        </div>

    </body>
</html>