This directive allows you to add map elements.

Code on Github Download (0.5.0)

Click to add a marker!



Lat: , Lng: Set Position


<section id="map">
<h4>Click to add a marker!</h4>
  <li ng-repeat="marker in myMarkers">
    <a ng-click="myMap.panTo(marker.getPosition())">Pan to Marker {{$index}}</a>

<!-- this is the confusing part. we have to point the map marker directive
  at an existing google.maps.Marker object, so it can hook up events -->
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
  ui-event="{'map-click': 'openMarkerInfo(marker)'}">

<div ui-map-info-window="myInfoWindow">
  Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
  <a ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>

<!-- Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
google maps -->
<div id="map_canvas" ui-map="myMap" class="map"
  ui-event="{'map-click': 'addMarker($event, $params)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
.map {
  height: 400px;
  width: 600px;
  margin: auto;
function initCall() {
  console.log('Google maps api initialized.');
  angular.bootstrap(document.getElementById('map'), ['doc.ui-map']);

app.controller('MapCtrl', ['$scope', function($scope) {

$scope.myMarkers = [];

$scope.mapOptions = {
  center: new google.maps.LatLng(35.784, -78.670),
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP

$scope.addMarker = function($event, $params) {
  $scope.myMarkers.push(new google.maps.Marker({
    map: $scope.myMap,
    position: $params[0].latLng

$scope.setZoomMessage = function(zoom) {
  $scope.zoomMessage = 'You just zoomed to '+zoom+'!';

$scope.openMarkerInfo = function(marker) {
  $scope.currentMarker = marker;
  $scope.currentMarkerLat = marker.getPosition().lat();
  $scope.currentMarkerLng = marker.getPosition().lng();
  $scope.myInfoWindow.open($scope.myMap, marker);

$scope.setMarkerPosition = function(marker, lat, lng) {
  marker.setPosition(new google.maps.LatLng(lat, lng));

Remember that you can pass a variable containing an object to ui-event