CODEWITHSUNDEEP
javascriptgoogle-earthgoogle-earth-plugin
Dom
Dom

Reputation: 2569

Google Earth API change placemark image on mouseover

I am trying to change a placemark image on mouseover. Here is the mouseover event handler:

function changePlacemark(e){
    e.preventDefault();
    this.getStyleSelector().getIconStyle().getIcon().setHref('myImageURL');
}

The problem is that when the function runs, it does indeed change the image but it also completely resets the placemark causing it to do the zoom animation all over again just as if were a brand new placemark being added to the map.

Is there a way to prevent this from happening? I am looking to just change the image, not reset the placemark. Kind of ruins the experience.

Upvotes: 1

Views: 464

Answers (1)

Fraser
Fraser

Reputation: 17094

Sure, you can use styles to create roll over icons either in KML or via the api. You just need to set the style of the feature, rather than updating the href attribute of the icon.

In the api:

  var style = ge.createStyle("");
  style.getIconStyle().getIcon().setHref('myImageURL');
  feature.setStyleSelector(style);

In Kml:

  <Document>
    <Style id="highlightPlacemark">
      <IconStyle>
        <Icon>
          <href>http://maps.google.com/mapfiles/kml/paddle/red-stars.png</href>
        </Icon>
      </IconStyle>
    </Style>
    <Style id="normalPlacemark">
      <IconStyle>
        <Icon>
          <href>http://maps.google.com/mapfiles/kml/paddle/wht-blank.png</href>
        </Icon>
      </IconStyle>
    </Style>
    <StyleMap id="exampleStyleMap">
      <Pair>
        <key>normal</key>
        <styleUrl>#normalPlacemark</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#highlightPlacemark</styleUrl>
      </Pair>
    </StyleMap>
    <Placemark>
      <name>Roll over this icon</name>
      <styleUrl>#exampleStyleMap</styleUrl>
      <Point>
        <coordinates>-122.0856545755255,37.42243077405461,0</coordinates>
      </Point>
    </Placemark>
  </Document>

Upvotes: 2

Related Questions