I’m trying to get my head around angular and using it for writing SharePoint Apps, but one of the first things I wanted to write used google maps.

Luckily (or not depending on how much pain you want to know this caused me) there is a directive library for google maps.

After far too many save and refresh and crash cycles I have a simple example working that has markers and info windows.

Here it is

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angular-google-maps example</title>
<style>
        .angular-google-map-container {
            height: 800px;
        }
    </style>
<!-- Google Maps API v3 -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;language=en"></script>
<!--  v1.0.8 -->
<script src="angular.min.js"></script>
<!-- http://underscorejs.org/ -->
<script src="underscore-1.6.0.min.js"></script>
<!-- http://angular-google-maps.org -->
<script src="angular-google-maps.min.js"></script>
</head>
<body>
     <div ng-app="BinaryJamApp">
         <div ng-controller="MappingController">
 		<google-map  center="map.center" zoom="map.zoom" draggable="true" events="map.events"  options="map.options" pan="true"  control="map.control">
			<markers models="sites" coords="'self'" click="'onClicked'">
 				<windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
 					<p ng-non-bindable style="width:200px">{{ options.title }}</p>
 					<p ng-non-bindable>{{ latitude | number:4 }}, {{ longitude | number:4 }}!</p>
				</windows>
 			</markers>
 		</google-map>
         </div>
     </div>
     <script>
        var BinaryJamApp = angular.module('BinaryJamApp', ['google-maps']);

        function MappingController($scope) {
			$scope.sites=[];

			$scope.map = {
				control: {},
				options: {
					streetViewControl: false,
					panControl: false,
					maxZoom: 20,
					minZoom: 3
				},
				center: {
					latitude: 52,
					longitude: 0
				},
				zoom: 6
			};

			var onMarkerClicked = function (marker) {
				marker.showWindow = true;
				$scope.$apply();
			}; 

			$scope.sites.push({latitude:52, longitude:0, options: { title: "Southerners" } });
			$scope.sites.push({latitude:52.5, longitude:1, options: { title: "Turkeys" } });

			_.each($scope.sites, function (site) {
				site.closeClick = function () {
					site.showWindow = false;
					$scope.$apply();
				};
				site.onClicked = function () {
					onMarkerClicked(site);
				};
			});

        }

    </script>
  </body>
 </html>