<!DOCTYPE html>
<html>

  <head>
    <title>Directiva de Google Maps</title>
    <link rel="stylesheet" href="style.css">
    <script src="http://maps.google.com/maps/api/js?v=3.exp"></script>
  </head>

  <body ng-app="mapApp" ng-controller="mapCtrl as Map">
    
    <div class="center">
      <h1>Directiva de Google Maps</h1>
      <md-google-maps lat="37.6443386" lng="-122.3793363" zoom="12" control="Map.control" options="Map.options"></md-google-maps>
      <div class="buttons-bar">
        <a ng-click="Map.control.addMarker()" class="button-add">Agregar Marker</a>
        <a ng-click="Map.control.clearMarkers()" class="button-del">Eliminar Markers</a>
      </div>
    </div>
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
    <script src="libs/md-google-maps.js"></script>
    <script src="script.js"></script>
  </body>

</html>
(function () {
  'use strict';
  
  angular.module('mapApp', ['MdGoogleMaps'])
  
    .controller('mapCtrl', Controller);
    
  Controller.$inject = [];
  
  function Controller() {
    var vm = this;
    
    vm.control = {};
    vm.options = {
  		mapTypeControl: true,
  		mapTypeId: google.maps.MapTypeId.ROADMAP,
  		panControl: true,
  		streetViewControl: true,
  		zoomControl: true
  	}
  }
} ());
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-color: #222;
  font-family: sans-serif;
}

.buttons-bar {
  display: -webkit-flex;
  display: flex;
}

[class*="button-"] {
  border: 1px solid;
  color: #fff;
  display: block;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  padding: .7em;
  text-align: center;
}

.button-add {
  background-color: #56AD56;
  border-color: #3b873b;
}

.button-del {
  background-color: #CD433D;
  border-color: darkred;
}

.center {
  left: 50%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 600px;
}

#md-google-maps {
  background: white;
  border: 1px solid #bbb;
  height: 300px;
  margin: 10px 0;
}

h1 {
  color: white;
  font-weight: 400;
  margin: 0;
  text-align: center;
}
# Google Maps Directive with Angular 1.3+

This is a sample of how to create an angular directive for google maps, it only include some basic functions like setting control options and adding and removing markers dinamically.
(function () {
  'use strict';
  
  angular.module('MdGoogleMaps', [])
    .directive('mdGoogleMaps', MdGoogleMaps);
    
  MdGoogleMaps.$inject = [];
  
  function MdGoogleMaps() {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        lat: '=',
        lng: '=',
        zoom: '=',
        control: '=',
        options: '='
      },
      template: '<div id="md-google-maps"></div>',
      link: function(scope, element, attrs) {
        var center = new google.maps.LatLng(scope.lat, scope.lng);
        var zoom = scope.zoom || 12;
        var mapSettings = {
          center: center,
          zoom: zoom
        };
        var map = {};
        var arrMarkers = [];
        
        initialize();
        
        function addMarker() {
          arrMarkers.push(new google.maps.Marker({
            position: map.getCenter(),
            map: map
          }));
        }
        
        function clearMarkers() {
          if (arrMarkers.length === 0) return;
          angular.forEach(arrMarkers, function(marker) {
            marker.setMap(null);
          });
          
          arrMarkers = [];
        }
        
        function initialize() {
          if(undefined !== scope.options)
            mapSettings = _.merge(mapSettings, scope.options);
          
          map = new google.maps.Map(element[0], mapSettings);
          
          if(undefined !== scope.control) {
            scope.control.addMarker = addMarker;
            scope.control.clearMarkers = clearMarkers;
          }
        }
      }
    }
  }
} ());