angular-google-maps markers + window

http://stackoverflow.com/questions/28291980

HTML

<title>Angular Google Maps</title>

<script src="https://code.angularjs.org/1.3.10/angular.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js'></script>
<script src='https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.min.js'></script>
<script src='https://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js'></script>
    
<body ng-app="app">
    
<div class="angular-google-map-container" ng-controller="MainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
        <ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" closeClick="closeClick()">
            <div>Hello</div>
        </ui-gmap-window>
        <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
        </ui-gmap-markers>
    </ui-gmap-google-map>
</div>
</body>

CSS

.angular-google-map-container {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

JavaScript

var myApp = angular.module('app', ['uiGmapgoogle-maps']);

myApp.config(function(uiGmapGoogleMapApiProvider) {
	uiGmapGoogleMapApiProvider.configure({
		key: '',
		v: '3',
		libraries: 'weather,geometry,visualization'
	});
});

myApp.controller('MainCtrl', function($scope, uiGmapGoogleMapApi, uiGmapIsReady) {

    uiGmapGoogleMapApi
    .then(function(maps){
		$scope.googlemap = {};
		$scope.map = {
			center: {
				latitude: 37.78,
				longitude: -122.41
			},
			zoom: 14,
			pan: 1,
			options: $scope.mapOptions,
			control: {},
			events: {
				tilesloaded: function (maps, eventName, args) {
				},
				dragend: function (maps, eventName, args) {
				},
				zoom_changed: function (maps, eventName, args) {
				}
			}
		};
    });
    
    $scope.windowOptions = {
        show: false
    };

    $scope.onClick = function(data) {
        $scope.windowOptions.show = !$scope.windowOptions.show;
        console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
        console.log('This is a ' + data);
        alert('This is a ' + data);
    };

    $scope.closeClick = function() {
        $scope.windowOptions.show = false;
    };

        $scope.title = "Window Title!";
    
    uiGmapIsReady.promise()                                    // if no value is put in promise() it defaults to promise(1)
    .then(function(instances) {
        console.log(instances[0].map);                        // get the current map
    })
    .then(function(){
        $scope.addMarkerClickFunction($scope.markers);
    });
    
    $scope.markers = [
        {
            id: 0,
            coords: {
                latitude: 37.7749295,
                longitude: -122.4194155
            },
            data: 'restaurant'
        },
        {
            id: 1,
            coords: {
                latitude: 37.79,
                longitude: -122.42
            },
            data: 'house'
        },
        {
            id: 2,
            coords: {
                latitude:...