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&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>