title: Angular Google Maps Custom Marker
body: <p>I'm having a hard time getting a custom marker icon to work with my google maps set up. I just need one marker for the latitude and longitude that I pass in with my factory. I don't need multiple markers.</p>
  
  <p>Inside my controller:</p>
  
  <pre><code>var mapOptions = {
      panControl    : true,
      zoomControl   : true,
      scaleControl  : true,
      mapTypeControl: true,
      mapTypeId     : google.maps.MapTypeId.ROADMAP
  };
  $scope.map = ($scope,{
      center: {
          latitude: $scope.lat,
          longitude: $scope.long
      },
      zoom: 13,
      options: mapOptions,
      icon: '{url:"https://vacationcandy.com/assets/images/lollipin.png"}',
  });
  $scope.beachMarker = new google.maps.Marker({
      position: $scope.map.center,
      map: $scope.map,
      icon: '{url:"https://vacationcandy.com/assets/images/lollipin.png"}'
  });
  var updateCenter = function() {
      $scope.map.center.latitude= $scope.lat;
      $scope.map.center.longitude= $scope.long;
  }
  $scope.$watch('lat', function() {
      updateCenter();
  });
  </code></pre>
  
  <p>Here is my HTML: </p>
  
  <p><code>&lt;ui-gmap-google-map center='map.center' zoom='map.zoom' id='map-canvas' icon='"beachMarker.icon"'&gt;&lt;/ui-gmap-google-map&gt;</code> </p>
  
  <p>I have tried a bunch of different things, even using the google marker directive inside ui-gmap-google-map but I can't seem to get it work. What am I doing wrong?</p>