Using sprites for marker images appears to not be possible

[mrthehud]

Hi Guys, Great work!

I'm wondering if I'm doing something wrong, but I can't get marker images to display when I'm using a sprite. Things work fine if I use a single image per marker. According to the documentation, options can be any additional options for the marker, as per the gmaps api.

My markers:

<marker ng-repeat="marker in markers"
        coords="marker.location"
        options="getMarkerIcon(marker)"></marker>

The controller (SpriteService is a factory I create using grunt-spritesmith and a custom format template, and returns what I believe are the correct options):

    ...
    $scope.getMarkerIcon = function(marker) {
        var colour = 'purple';
        if ($scope.activemarker && $scope.activemarker.id === marker.id) {
            colour = 'green';
        }
        var marker = SpriteService.getMarkerIcon(colour, marker.type);
        console.log('Using marker', marker);
        return marker;
    };

Example marker:

{
    "icon": {
        "url": "/images/map/sprites.png",
        "origin": {
            "x": 416,
            "y": 111
        },
        "size": {
            "width": "32px",
            "height": "37px"
        }
    }
} 

The console log shows the correct options hash being returned (with url, origin and size, under an icon key, as per my interpretation of the gmaps documentation), but I don't see any markers. If change the marker returned to be the value of 'icon', all I see is the default marker icon (red pin).

I've tested

<marker ng-repeat="marker in markers"
        coords="marker.location"
        icon="getMarkerImage(marker)"></marker>

which "works", if getMarkerImage returns just the sprite image, though of course, shows the whole sprite set.

Any ideas what I'm doing wrong? I'm sure it's something simple I've missed - but I can't see it. Thanks in advance!

[mrthehud]

So, I think it was my bad.

Need to use the google.maps.Point and google.maps.Size constructors for origin and size in my sprite service.

Hopefully this helps someone else.

[nmccready]

Thanks, do u have a working example?

[mrthehud]

Returning:

{
    url: 'images/map/sprites.png',
    origin: new google.maps.Point(sprite.origin[0], sprite.origin[1]),
    size: new google.maps.Size(sprite.size[0], sprite.size[1])
}

from the Sprite service solves the problem. I thought that those classes could be standard objects, but that's not the case.