开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜