CODEWITHSUNDEEP
javascriptangularjsgoogle-maps
Brooke Clonts
Brooke Clonts

Reputation: 465

Angular Google Maps Custom Marker

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.

Inside my controller:

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();
});

Here is my HTML:

<ui-gmap-google-map center='map.center' zoom='map.zoom' id='map-canvas' icon='"beachMarker.icon"'></ui-gmap-google-map>

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?

Upvotes: 0

Views: 3691

Answers (1)

mostruash
mostruash

Reputation: 4189

You don't add the marker at all do you? Try something along the lines (not tested):

<ui-gmap-google-map center="map.center" zoom="map.zoom" id="map-canvas">
  <ui-gmap-marker coords="map.center" icon="map.icon" idKey="1">
  </ui-gmap-marker>
</ui-gmap-google-map>

Check out docs before trying to hack your way into making it work with random examples on the web. Marker documentation is very clear.

Upvotes: 1

Related Questions