Using Flag Sprites in Google Earth

Question

So I've been using the Google Earth API and have attempting to change the image of the place marks upon mouseover.

I would like to use flag-sprites to minimize the load but I'm having trouble working out the syntax. The usage is pretty straight forward if I were to drop it straight into the HTML file. Example:

<img src="blank.gif" class="flag flag-cz" alt="Czech Republic" />

But when it comes to putting it into my javascript file, I'm a bit lost. Here's my code:

  var placemark = ge.createPlacemark('');
  placemark.setName(country.name);
  ge.getFeatures().appendChild(placemark);

  google.earth.addEventListener(placemark, "mouseover", function(event){
    placemark.setAttribute("class", "flag flag-cz");
    placemark.setAttribute("alt", "Czech Republic");
    placemark.setAttribute("src", "blank.gif");
  });

I also attempted to do this using the highlightIcon technique but the "setAttribute" method breaks the code (since highlightIcon is a different variable type than placemark):

    //Create highlight style for style map.
    var highlightStyle = ge.createStyle('');
    var highlightIcon = ge.createIcon('');
    highlightIcon.setHref('http://google-maps-icons.googlecode.com/files/world.png');

    highlightIcon.setAttribute("class", "flag flag-cz");
    highlightIcon.setAttribute("alt", "Czech Republic");
    highlightIcon.setAttribute("src", "blank.gif");

    highlightStyle.getIconStyle().setIcon(highlightIcon);
    highlightStyle.getIconStyle().setScale(15.0);

Answer 1

You can achieve what you want but not with CSS, since GE Plugin lives in a different realm.

First you define the sprite as the Placemark Icon, then you must explicitly set its offset in the X and Y axis. Something like:

var icon = window.ge.createIcon('');
icon.setHref("http://opengameart.org/sites/default/files/styles/watermarked/public/last-guardian-sprites_0.png");

// Set the size of the ICON - according to the dimension on the sprite
icon.setW(50);
icon.setH(50);

// Set its offset
icon.setX(10);
icon.setY(50);

var placemark = ge.createPlacemark('');

var style = ge.createStyle(''); //create a new style
style.getIconStyle().setIcon(icon); //apply the icon to the style
placemark.setStyleSelector(style); //apply the style to the placemark

// Set the placemark's location.  
var point = ge.createPoint('');
point.setLatitude(window.lat);
point.setLongitude(window.lon);
placemark.setGeometry(point);
window.ge.getFeatures().appendChild(placemark);

Also the Y axis begins in the bottom left corner of your Image.

In order to use flag-sprites you will have to re-map all the offsets (x,y), for each country flag, in your code and use those offsets when loading the placemark.

Here is the reference for the KmlIcon: https://developers.google.com/earth/documentation/reference/interface_kml_icon