Changing KML Placemark icons on click in Google Maps API V3
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.
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.
精彩评论