example/infobox-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>

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

                /*<bing-map> directive options*/
                $scope.mapOptions = {};
                $scope.mapOptions.center = {latitude: 30.614919,longitude: -96.342316};
                $scope.mapOptions.zoom = 6;
                $scope.mapOptions.mapType = 'a';

                /*<pushpin> directive options*/
                $scope.pushpin = {};
                $scope.pushpin.location = {latitude: 30.614919,longitude: -96.342316};
                $scope.pushpin.options = {
                    draggable: true
                }
                $scope.pushpin.events = {
                    click: function() {
                        $scope.infobox.visible = !$scope.infobox.visible;
                    }
                };

                $scope.infobox = {};
                $scope.infobox.options = {
                    offset: new Microsoft.Maps.Point(0,25),
                    width: 125,
                    height: 50
                };
                $scope.infobox.title = 'Gig\' Em!';
                $scope.infobox.visible = true;
            });
        </script>

        <style type="text/css">
            bing-map {
                height: 100%;
                width: 100%;
            }
        </style>

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

        <div class="bing-map-container" ng-controller="ExampleController">
            <bing-map
                credentials="'AkaxzD5YOJCbIvziHVOLfm6AkeM5Z5UQ3dHS53mQzwK-6LGWnxYjAwNqfe3D4UBT'"
                center="mapOptions.center"
                zoom="mapOptions.zoom"
                mapType="mapOptions.mapType">

                <pushpin
                    lat="pushpin.location.latitude"
                    lng="pushpin.location.longitude"
                    options="pushpin.options"
                    events="pushpin.events">
                    <info-box
                        options="infobox.options"
                        title="infobox.title"
                        visible="infobox.visible"></info-box>
                </pushpin>

            </bing-map>

        </div>

    </body>
</html>