Google Maps - custom icons not appearing

Question

I have written some javascript to call information from and place a marker with a custom icon for each entry in the data file 'latlngtrunc.js'.

latlngtrunc.js contains 'product', 'result', 'level' & 'posn' for each entry. There are 3 different 'levels' each of which I would like to represent as a different colored icon.

The code below works fine when using the commented line:

var marker = new GMarker(posn);

and shows the generic markers (no custom icons) as expected. When I replace that with:

var marker = new GMarker({map:map, posn:posn, icon:icon.icon, shadow:icon.shadow});

No markers are displayed at all.

Both of the alerts:

alert(icon.icon);
alert(icon.shadow);

correctly return the image urls, so I'm pretty sure all of the information is being retrieved correctly from the external 'latlngtrunc.js' file.

Any help would be much appreciated!

<script src="latlngtrunc.js" type="text/javascript"></script>
<script src="markermanager.js"></script>
<script type="text/javascript">
    //<![CDATA[
    var customIcons = {
            risk: {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            threat: {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            fraud: {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
    };
    var map;
    var mgr;
    var allmarkers = [];

    function load() {
            if (GBrowserIsCompatible()) {
                    map = new GMap(document.getElementById("map"));
                    map.addControl(new GLargeMapControl());
                    map.addControl(new GOverviewMapControl());
                    map.setCenter(new GLatLng(57.16, -2.10), 10);
                    map.enableDoubleClickZoom();
                    mgr = new MarkerManager(map, {trackMarkers:true});
                    window.setTimeout(setupOfficeMarkers, 0);
            }
    }

    function setupOfficeMarkers() {
            allmarkers.length = 0;
            for (var i in officeLayer) {
   var layer = officeLayer[i];
                    var markers = [];
                    for (var j in layer["places"]) {
                            var place = layer["places"][j];
                            var product = place["product"];
                            var result = place["result"];
                            var level = place["level"];
                            var posn = new GLatLng(place["posn"][0], place["posn"][1]);
                            var icon = customIcons[level] || {};
                            var marker = createMarker(posn, product, level, result, icon);
                            markers.push(marker);
                            allmarkers.push(marker);
                    }
                    mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
             }
             mgr.refresh();
     }
     function createMarker(posn, product, level, result, icon) {
            alert(icon:icon.icon);

            var marker = new GMarker({map:map, posn:posn, icon:icon.icon, shadow:icon.shadow});
            /**
            var marker = new GMarker(posn);
            **/
                    GEvent.addListener(marker, "click", function() { 
                            var message ="<b>Product: "+ product +"<br>Result: "+ result +"</b>";
                            marker.openInfoWindowHtml(message);
                    });
                    return marker;
    }

    //]]>
</script>

Answer 1

Simple solution in the end. I needed to add 'Anchor' properties to 'var customIcons' in order for them to display:

var customIcons = {
            risk: {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png',
                    iconAnchor: new GPoint(0,0),
                    infoWindowAnchor: new GPoint(0,0)
            },
            threat: {
                    image: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png',
                    iconAnchor: new GPoint(0,0),
                    infoWindowAnchor: new GPoint(0,0)
            },
            fraud: {
                    image: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png',
                    iconAnchor: new GPoint(0,0),
                    infoWindowAnchor: new GPoint(0,0)
            }
    };

Anchors of (0,0) offset the images slightly so will need fiddling with to position correctly.