title: Add Marker in Angular-Google-Maps
body: <p>I'm currently having some trouble adding a marker on click to Google Maps. I'm using <a href="http://angular-ui.github.io">http://angular-ui.github.io</a> .</p>
  
  <p>Here is my code:
  HTML:</p>
  
  <pre><code>&lt;ui-gmap-google-map center='map.center' zoom='map.zoom' events="map.events"&gt;
    &lt;ui-gmap-marker coords="map.marker.coords" idKey="map.marker.id"&gt;&lt;/ui-gmap-marker&gt;
  &lt;/ui-gmap-google-map&gt;
  </code></pre>
  
  <p>And there is my JS:</p>
  
  <pre><code>$scope.map = {
      center: {
          latitude: alat.value, longitude: alon.value },
          zoom: 15,
          streetViewControl: false,
          events: {
              click: function (map, eventName, originalEventArgs) {
                  var e = originalEventArgs[0];
                  var lat = e.latLng.lat(),lon = e.latLng.lng();
                  $scope.map.marker = {
                      id: 1,
                      coords: {
                          latitude: lat,
                          longitude: lon
                      }
                  };
                  $scope.$apply();
              }
          }
      };
  </code></pre>
  
  <p>I've been following the Angular-Google-Maps API, but I'm not entirely excellent at the Google Maps API as yet. So far, I've deduced that my click event does work, but my marker is not being added to the map. Help would be appreciated.</p>