title: AngularJS Google Maps: Add/update marker and update centerpoint on click
body: <p><strong>Problem:</strong> I am having trouble getting a marker to display on a Google map. I want the user to click, the marker to display, and the map to center on the marker.</p>
  
  <p><strong>What's Broken:</strong> No marker displays on click. The lat/long div below the map doesn't display either.</p>
  
  <p><strong>What Works:</strong> The map displays, and properly centers on the click location. The variable <code>mapClicked</code> updates to <code>true</code>.</p>
  
  <p><strong>Self-Diagnoses:</strong> I think the issue stems from a scope issue with <code>vm.map</code>, or changes to <code>vm.map</code> not being digested in the AngularJS life cycle.</p>
  
  <p><strong>Third Party Package:</strong> I'm using <a href="http://angular-ui.github.io/angular-google-maps/" rel="nofollow">Angular Google Maps.</a> </p>
  
  <p><strong>My Code Snippets:</strong></p>
  
  <p><em>HTML:</em> </p>
  
  <pre><code>&lt;ui-gmap-google-map id="listingMap"
                          center='listingCtrl.map.center'
                          zoom='listingCtrl.map.zoom'
                          events='listingCtrl.map.events'
                          style="height: 250px; width: 100%"&gt;
  
          &lt;ui-gmap-marker ng-if="listingCtrl.mapClicked"
                          coords="listingCtrl.map.marker"
                          idKey=" 'userClickLocation' "&gt;
  
          &lt;/ui-gmap-marker&gt;
  
  &lt;/ui-gmap-google-map&gt;
  
  &lt;div class="col-xs-12" ng-if="listingCtrl.map.marker.latitude"&gt;
          &lt;span style="font-weight: bold"&gt;Latitude: &lt;/span&gt;{{ listingCtrl.map.marker.latitude }}
          &lt;span style="font-weight: bold"&gt;Longitude: &lt;/span&gt;{{ listingCtrl.map.marker.longitude }}
  &lt;/div&gt;
  </code></pre>
  
  <p><em>Controller:</em></p>
  
  <pre><code>(function () {
      'use strict';
      angular.
          module('boat').
          controller('NewListingController', NewListingController);   
  
      function NewListingController() {
          var vm = this;
  
          vm.activePage = 1;
          vm.map = getMap();
          vm.mapClicked = false;
  
          ////////////////////
  
          function getMap() {
              var map = {
                  center: {latitude: 20.9, longitude: -78.1},
                  zoom: 5,
                  marker: {},
                  events: {
                      click: function (map, eventName, originalEventArgs) {
                          var e = originalEventArgs[0];
                          map.marker = {latitude: e.latLng.lat(), longitude: e.latLng.lng()};
                          map.panTo(new google.maps.LatLng(map.marker.latitude, map.marker.longitude));
                          vm.mapClicked = true;
                      }
                  }
              };
              return map;
          }
      }
  })();
  </code></pre>
  
  <p><strong>Recap:</strong> Desired behavior is for the user to click the map to add a marker. The coordinates should render below the map. The map should center on the click. Additional clicks update the single marker and coordinates.</p>
  
  <p>Can you help?</p>