Changing KML Placemark icons on click in Google Maps API V3

Question

I am trying to change the KML placemark icons of a KML overlay in a sample Maps application that I am working on.

Here's the sample code -

function seekml() {

var myLatlng = new google.maps.LatLng(40.65, -73.95);
var myOptions = {
    zoom: 14,
    mapTypeControl: true,
    center: myLatlng,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
     position: google.maps.ControlPosition.TOP_RIGHT
    },
    navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
url_end = "?nocache=" + (new Date()).valueOf(); //For No KML Caching 
myKML = "http://kmlscribe.googlepages.com/SamplesInMaps.kml" + url_end

gMap = new google.maps.Map(document.getElementById("map"), myOptions);
var ctaLayer = new google.maps.KmlLayer(myKML,{suppressInfoWindows: true});
ctaLayer.setMap(gMap);

google.maps.event.addListener(ctaLayer, 'click', function(event) {              
    this.setIcon(gYellowIcon);
  });
}

gYellowIcon has been defined in my code before -

var gYellowIcon = new google.maps.MarkerImage(
  "image url",
  new google.maps.Size(31, 31),
  new google.maps.Point(0, 0),
  new google.maps.Point(6, 20));

I want to change the KML overlay placemarks, when the user clicks on any of the placemarks shown on the KML overlay. The above code doesn't work.

Answer 1

I'm currently working on the exact same thing and, in my case, I could directly edit the KML file. If you have access to it and can edit it, here's what I did:

1) Right under <document> tag, paste something like this:

<Style id="desired_id">
  <IconStyle>
    <Icon>
      <href>http://www.yourwebsite.com/your_preferred_icon.png</href>
      <scale>1.0</scale>
    </Icon>    
  </IconStyle>
</Style>

The scale parameter is not supported in Google Maps at the moment. Here you can check all supported elements of KML in Google Maps:

http://code.google.com/intl/en-EN/apis/kml/documentation/kmlelementsinmaps.html

And here you've got some info about compatibility between KML and GMaps:

http://code.google.com/intl/en-EN/apis/kml/documentation/mapsSupport.html

2) Once you've defined you're style, you can refer to it on each Placemark item by adding the following to it:

<styleUrl>#desired_id</styleUrl>

Now, all your placemarks should display showing your custom icon.

Hope it helps.

EDIT: Sorry I didn't see the on click part. This isn't quite what you need then. I'll leave it in case it helps someone else. Sorry for that.