Angular Google Maps Custom Marker

Question

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?

@mostruash- yes it does. it just doesn't show a marker at all and I'd like a marker with my own image. — Brooke Clonts
– Brooke Clonts, Commented Jul 28, 2015 at 21:27

mostruash · Accepted Answer · 2015-07-28 21:57:40Z

1

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.

edited Jul 28, 2015 at 21:57

answered Jul 28, 2015 at 21:30

mostruash

4,1892 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Brooke Clonts Over a year ago

@mostruash- <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> - I've looked at the documentation and this looks fine to me. It does show a marker now, but it shows the default red marker, not the marker i've asked it to show.

Brooke Clonts Over a year ago

@mostruash- see above comment^ I think I'm almost there.

Brooke Clonts Over a year ago

I tried that and I got it to work in the plunker but when I moved it over to my app, it doesn't work anymore. it just shows the default pin. I don't know why. It's driving me crazy. My app does use ng-view and routes if that makes a difference. it works here: plnkr.co/edit/AOWc5Vz2kIzYou4bDb5i?p=preview

Brooke Clonts Over a year ago

After looking into it some more, I've figured out that this solution would work^ except that something in my controller is screwing it up. I have been able to get a plunker to work with some of my other code taken out using what you offered above, so thank you for your help. I'm just going to have to take my controller apart to see what is causing it to break.

Brooke Clonts Over a year ago

I had the wrong version of the file referenced. Once the angular-google-maps.js file was updated, I had no more problems.

Collectives™ on Stack Overflow

Angular Google Maps Custom Marker

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related