Changing KML Placemark icons on click in Google Maps API V3

Question

Hi,

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.

Any help on this would be great!

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&lt;/href&gt;
      <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.