deehidayat/Angular-Gmaps.html

## Angular-Gmaps.html
<!DOCTYPE HTML>
<html>
    <head>
        <style>
            html, body { height: 100%; }

            .angular-google-map-container { height: 100vh; }
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">
        </script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js">
        </script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.0.11/angular-google-maps.js">
        </script>
        <script src="//maps.googleapis.com/maps/api/js?sensor=false">
        </script>
        <script>
            var myApp = angular.module('myApp', ['uiGmapgoogle-maps']);

            myApp.factory("Markers", function(){
              var Markers = [
                {
                  "id": "0",
                  "coords": {
                    "latitude": "45.5200",
                    "longitude": "-122.6819"
                  },
                  "window": {
                    "title": "Portland, OR"
                  }
                },
                {
                  "id": "1",
                  "coords": {
                    "latitude": "40.7903",
                    "longitude": "-73.9597"
                  },
                  "window" : {
                    "title": "Manhattan New York, NY"
                  }
                }
              ];
              return Markers;
            });

            myApp.controller("gMap",function($scope,Markers){
              $scope.map = {
                center: { latitude: 39.8282, longitude: -98.5795 },
                zoom: 4
              };
              $scope.markers = Markers;
            });
        </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="gMap">
            <ui-gmap-google-map aria-label="Google map" center="map.center" zoom="map.zoom">
                <ui-gmap-marker coords="marker.coords" events="marker.events" idkey="marker.id" ng-repeat="marker in markers" options="marker.options">
                    <ui-gmap-window>
                        <div>
                            {{marker.window.title}}
                        </div>
                    </ui-gmap-window>
                </ui-gmap-marker>
            </ui-gmap-google-map>
        </div>
    </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	html, body { height: 100%; }

	.angular-google-map-container { height: 100vh; }
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">
	</script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js">
	</script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.0.11/angular-google-maps.js">
	</script>
	<script src="//maps.googleapis.com/maps/api/js?sensor=false">
	</script>
	<script>
	var myApp = angular.module('myApp', ['uiGmapgoogle-maps']);

	myApp.factory("Markers", function(){
	var Markers = [
	{
	"id": "0",
	"coords": {
	"latitude": "45.5200",
	"longitude": "-122.6819"
	},
	"window": {
	"title": "Portland, OR"
	}
	},
	{
	"id": "1",
	"coords": {
	"latitude": "40.7903",
	"longitude": "-73.9597"
	},
	"window" : {
	"title": "Manhattan New York, NY"
	}
	}
	];
	return Markers;
	});

	myApp.controller("gMap",function($scope,Markers){
	$scope.map = {
	center: { latitude: 39.8282, longitude: -98.5795 },
	zoom: 4
	};
	$scope.markers = Markers;
	});
	</script>
	</head>
	<body>
	<div ng-app="myApp" ng-controller="gMap">
	<ui-gmap-google-map aria-label="Google map" center="map.center" zoom="map.zoom">
	<ui-gmap-marker coords="marker.coords" events="marker.events" idkey="marker.id" ng-repeat="marker in markers" options="marker.options">
	<ui-gmap-window>
	<div>
	{{marker.window.title}}
	</div>
	</ui-gmap-window>
	</ui-gmap-marker>
	</ui-gmap-google-map>
	</div>
	</body>
	</html>