javascript - geoxml3: Cómo cargar iconos personalizados

google-maps-api-3 xml-parsing

Question

Necesito cargar un archivo KML personalizado en un Google Map, el código es prácticamente igual al de los recursos apropiados:

function initialize() {
var myLatlng = new google.maps.LatLng(39.397, -100.644);
  var myOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById(''map_canvas''), myOptions);

  var geoXml = new geoXML3.parser({map: map, processStyles: true});
  geoXml.parse(''test.kml'');
};

El .kml viene directamente de Google Maps, y tiene una serie de marcadores, todos con iconos personalizados, por ejemplo:

<Style id="sn_1">
    <IconStyle>
        <scale>1.1</scale>
        <Icon>
            <href>http://maps.google.com/mapfiles/kml/paddle/Z.png</href>
        </Icon>
        <hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/>
    </IconStyle>
    <ListStyle>
        <ItemIcon>
            <href>http://maps.google.com/mapfiles/kml/paddle/Z-lv.png</href>
        </ItemIcon>
    </ListStyle>
</Style>

Otros iconos se definen como rutas locales (existentes), como:

<Icon>
<href>img/marker/5.png</href>
</Icon>

Sin embargo, aunque el mapa muestra muy bien, ninguno de los íconos se carga, en cambio solo obtengo los íconos predeterminados de Google Maps. Cualquier ayuda con esto sería muy apreciada, ya que mi conocimiento de JavaScript es bastante limitado y siento que estoy en un punto en el que no me llevarán a ningún lugar más ...

Saludos :)

Answer 1

Lo resolví con su código:

var marker = new google.maps.Marker ({position: point, icon: placemark.style.icon});

esto la inicialización completa:

        //Construct a geoXML3 parser
        var myParser = new geoXML3.parser({
                map: map, 
                singleInfoWindow:true,
                processStyles: true,
                createMarker:function(placemark){
                    //Constructing marker for each Placemark node, and then add it to the markclustere
                    var point = new google.maps.LatLng(placemark.point.lat, placemark.point.lng);
                    var marker = new google.maps.Marker({position:point,icon: placemark.style.icon});

                    google.maps.event.addListener(marker, "click", function(){
                        //console.log(placemark.name);
                        infoWindow.content = placemark.description;
                        infoWindow.open(map, marker);
                    });

                    markerclusterer.addMarker(marker);
                }
        });

Answer 2

La respuesta proporcionada por grigno funciona bien para mí, pero todos los marcadores en el archivo KML deben tener un estilo como este o verificar si placemark.style.icon no está definido antes de pasar a la función:

<Document>
<name>myKml.kml</name>
<Style id="My_Style">
    <IconStyle> 
        <Icon> 
            <href>office-building.png</href>
        </Icon>
    </IconStyle>
</Style>

y en la sección de marca de posición:

<Placemark>
   <name><![CDATA[iMEX0011]]></name>
   <description><![CDATA[MARKER TITLE]]></description>
   <styleUrl>#My_Style</styleUrl> 
   <Point>
       <coordinates>-99.2232472,25.4413972,0</coordinates>
   </Point>
</Placemark>