Google Maps - les icônes personnalisées n'apparaissent pas

Question

J'ai écrit du javascript pour appeler des informations et placer un marqueur avec une icône personnalisée pour chaque entrée dans le fichier de données 'latlngtrunc.js'.

latlngtrunc.js contient 'produit', 'résultat', 'niveau' & 'posn' pour chaque entrée. Il y a 3 'niveaux' différents que je voudrais représenter comme une icône de couleur différente.

Le code ci-dessous fonctionne bien lors de l'utilisation de la ligne a commenté:

var marker = new GMarker(posn); 

et montre les marqueurs génériques (sans icônes personnalisées) comme prévu. Lorsque je le remplace par:

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

Aucun marqueur n'est affiché.

Les deux alertes:

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

retour correctement les urls d'image, donc je suis assez sûr que toutes les informations sont extraites correctement à partir du fichier 'latlngtrunc.js de l'extérieur.

Toute aide serait grandement appréciée!

<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

Solution simple à la fin. Je avais besoin d'ajouter des propriétés « Anchor » à « var » CustomIcons afin qu'ils afficher:

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

Ancres de (0,0) décalage des images légèrement aura donc besoin de jongler avec pour positionner correctement.