geoxml3: How to load custom Icons

Question

I need to load a custom kml file into a Google Map, the code is pretty much unchanged from the appropriate ressources:

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

The .kml comes straight out of Google Maps, and has a bunch of markers, all with custom icons, for example:

<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>

Other Icons are defined as (existing) local paths, like:

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

However, while the map shows just fine, none of the icons get loaded, instead I only get the default Google Maps Icons. Any help with this would be greatly appreciated, since my JavaScript knowledge is pretty limited and I feel I'm at a point where more headscratching won't get me anywhere...

Cheers :)

score 2 · Answer 1 · answered Apr 13 '14 at 09:06

Answer provided by grigno works well for me, but all markers in KML file must have a style like this or check if placemark.style.icon is undefined before passign to function:

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

and in the placemark section:

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

This was so helpful. Thanks @user3528606 – Christopher M. Nov 09 '16 at 10:07 — Christopher M., Nov 09 '16 at 10:07

score 1 · Answer 2 · answered Apr 03 '13 at 09:10

I solved with tis code:

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

this the complete initialization:

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

geoxml3: How to load custom Icons

2 Answers2