Карты Google - пользовательские значки не отображаются

Question

Я написал некоторый javascript для вызова информации и размещения маркера с пользовательским значком для каждой записи в файле данных 'latlngtrunc.js'.

latlngtrunc.js содержит 'product', 'result', 'level' & 'posn' для каждой записи.Есть 3 разных «уровня», каждый из которых я хотел бы представить в виде разноцветного значка.

Приведенный ниже код отлично работает при использовании закомментированной строки:

var marker = new GMarker(posn);

и показываетобщие маркеры (без пользовательских значков), как и ожидалось.Когда я заменяю это на:

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

Маркеры вообще не отображаются.

Оба предупреждения:

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

правильно возвращают URL-адреса изображения, поэтому яЯ уверен, что вся информация правильно извлекается из внешнего файла 'latlngtrunc.js'.

Любая помощь будет принята с благодарностью!

<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

Простое решение в конце.Мне нужно было добавить свойства 'Anchor' в 'var customIcons', чтобы они отображали:

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

Якоря (0,0) слегка смещают изображения, поэтому потребуется корректировать их положение, чтобы правильно расположить.