Custom Angular directive for geocoding and storing location data from search. http://hpneo.github.io/gmaps/examples/geocoding.html

gmap-directive.js

app.directive("gmap", function() {
  return {
    restrict: "E",
    scope: false,
    replace: false,
    templateUrl: "map.html",
    link: function(scope){
      map = new GMaps({
        div: '#map',
        lat: scope.latitude,
        lng: scope.longitude
      });
      map.addMarker({
        lat: scope.latitude,
        lng: scope.longitude
      });
      $('#geocoding_form').submit(function(e){
        e.preventDefault();
        GMaps.geocode({
          address: $('#address').val().trim(),
          callback: function(results, status){
            if(status=='OK'){
              var latlng = results[0].geometry.location;
              map.setCenter(latlng.lat(), latlng.lng());
              map.addMarker({
                lat: latlng.lat(),
                lng: latlng.lng()
              });
              scope.$apply(function(){
                scope.latitude = latlng.lat();
                scope.longitude = latlng.lng();
              });
            }
          }
        })
      });
    }
  }
});

index.html

... HTML/CSS Stuff...
... ng-app stuff...

<gmap></gmap>

<!--Google Maps-->
<script src='//maps.googleapis.com/maps/api/js?sensor=true'></script>
<script src='bower_components/gmaps/gmaps.js'></script>

map.html

<form method="post" id="geocoding_form">
    <label for="address">Address:</label>
    <div class="input">
        <input type="text" id="address" name="address" />
        <input type="submit" class="btn" value="Search" />
    </div>
</form>

<div id="map"></div>