Integrated Google Maps to Venue Page

app/css/app.css

@@ -107,3 +107,5 @@ footer {
   height: 10em;
   overflow-y: auto;
 }
+
+.angular-google-map-container { height: 400px; }

app/index.html

@@ -27,6 +27,11 @@
   <script src="/js/lib/chosen-angular.js"></script>
   <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
   <script src="/js/lib/angular-ui-tinymce.js"></script>
+
+  <!-- Google Maps Libraries-->
+  <script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.min.js"></script>
+  <script src="https://maps.googleapis.com/maps/api/js"></script>
 
   <!-- User Defined Libraries -->
   <script src="/js/lib/extensions.js"></script> 

app/js/app.js

@@ -14,6 +14,8 @@ angular.module('app', [
 	'app.services',
 	'app.directives',
 	'app.controllers',
+	'nemLogging',
+	'uiGmapgoogle-maps'
 ]).config(function(RestangularProvider) {
 	RestangularProvider.setBaseUrl('https://api.tnyu.org/v3-test');
 
@@ -98,4 +100,11 @@ angular.module('app', [
 
 }).config(function(datepickerConfig) {
 	datepickerConfig.showWeeks = false;
+})
+.config(function(uiGmapGoogleMapApiProvider) {
+    uiGmapGoogleMapApiProvider.configure({
+      key: 'AIzaSyBZ2vS-x4GYyhTnMGEW20qJLaSNo9i48N4',
+	  v: '3.17',
+	  libraries: 'weather,geometry,visualization'
+	});
 });

app/js/controllers/actions/venues/venues-list-ctrl.js

@@ -3,10 +3,17 @@
 angular
 .module('app.controllers')
 .controller('VenuesListCtrl', function($scope, $rootScope, $stateParams, $state,
-	Restangular, apiDescriptor, dataTransformer, preProcess) {
+	Restangular, apiDescriptor, dataTransformer, preProcess, uiGmapGoogleMapApi) {
 	var resourceName = $stateParams.resourceName;
 	var resourceId = $stateParams.id;
 	$scope.resourceName = resourceName;
+	//Gmap origin setup
+	$scope.map = { center: { latitude: 40.72, longitude: -73.98 }, zoom: 13 };
+	$scope.options = { scrollwheel: false };
+	$scope.allMarkers = [];
+	$scope.selectedMarker = undefined;
+	var geocoder = new google.maps.Geocoder();
+
 	apiDescriptor.then(function(apiDescription) {
 		$scope.rdesc = apiDescription.resource(resourceName);
 	});
@@ -16,6 +23,7 @@ angular
 		selectionMode = 'multiple';
 	}
 
+	var markers = [];
 	$scope.selectionMode = selectionMode;
 	Restangular.all(resourceName)
 		.getList()
@@ -30,6 +38,18 @@ angular
 		//mapping venueID to organizations
 		_.each($scope.data, function(element) {
 			element = preProcess.convertTimeAttributes(element);
+			geocoder.geocode( { 'address': element.attributes.address}, function(results, status) {
+				if(status === 'OK'){
+					markers.push({
+						'id':
+						{
+							'latitude': results[0].geometry.location.lat(),
+							'longitude': results[0].geometry.location.lng(),
+							'title': element.attributes.name
+						}
+					});
+				}
+			});
 			if (element.relationships.organization.data !== null) {
 				Restangular.one("organizations/" + element.relationships.organization.data.id)
 				.get()
@@ -38,11 +58,24 @@ angular
 				});
 			}
 		})
+		$scope.allMarkers = markers;
 	});
 
 	$scope.updateSelection = function(newModelId) {
 	 		var index =	_.findIndex($scope.data, {'id': newModelId});
-	 		$scope.model = $scope.data[index];
+			 $scope.model = $scope.data[index];
+			 geocoder.geocode( { 'address': $scope.model.attributes.address}, function(results, status) {
+				if(status === 'OK'){
+					$scope.selectedMarker = {
+						'id':
+						{
+							'latitude': results[0].geometry.location.lat(),
+							'longitude': results[0].geometry.location.lng(),
+							'title': $scope.model.attributes.name
+						}
+					};
+				}
+			});
 	 		$state.transitionTo('list',
 	 			{id: newModelId, resourceName: resourceName},
 	 			{notify: false}

app/partials/actions/venues/venues-list.html

@@ -38,6 +38,9 @@ <h5>{{rdesc.attributes.description}}</h5>
 	</div>
 
 	<div class="form-group">
-
 	</div>
+	<ui-gmap-google-map center='map.center' zoom='map.zoom'>
+		<ui-gmap-marker ng-if="selectedMarker == undefined" ng-repeat="m in allMarkers" coords="m.id" icon="m.icon" idkey="m.id"></ui-gmap-marker>
+		<ui-gmap-marker ng-if="selectedMarker != undefined" coords="selectedMarker.id" idkey="selectedMarker.id"></ui-gmap-marker>
+	</ui-gmap-google-map>
 </div>