title: Angular JS with google maps support + autocomplete
body: <p>i recently started working with angularjs and i'm making an app with google maps.
  I've made a module where i call to a map and i call to an autocomplete function. The autocomplete works but the map is not showing</p>
  
  <p>this is my code for module</p>
  
  <pre><code>    module.directive('googleplace', function() {
      return {
          require: 'ngModel',
          replace: true,
          link: function(scope, element, attrs, model) {
              var options = {
                  types: []
              };
              var myOptions = {
                  zoom: 6,
                  center: new google.maps.LatLng(51.228388, 4.405518),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              scope.gPlace = new google.maps.places.Autocomplete(element[0], options);
  
              google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
                  scope.$apply(function() {
                      console.log(element.val());
                      console.log(element);
                      model.$setViewValue(element.val());                
                  });
              });
              var map = new google.maps.Map(document.getElementById(attrs.id), myOptions);
              console.log(map);
          }
      };
  });
  </code></pre>
  
  <p><strong>Bonus:</strong>
  Also i want to put overlays on my map using data from my scope, how can i give the object the modelvalue and then put it in google maps?</p>