In order to have markers that are clickable and marker shadows that are not, I'm setting up two geoxml3 parsers, one for the markers and one for the shadows. That works, but I'm hoping that having two layers will also let me keep the shadow of one marker from falling on another marker. It's a subtle thing, but having a visually horizontal shadow overlaid on a visually vertical marker undercuts the 3-D effect. And in a cluster of markers, things get pretty murky down among the marker stems.
Now, I get that icons are rendered from north to south, so that an icon will peek over the top of an overlapping icon to the south of it. What I was expecting was that each parser would create its own layer, in the sense that a marker layer would appear entirely in front of a preceding shadow layer, with no shadow falling on any marker. It sure looks, though, like the parsers are working north to south down both "layers" at the same time. It seems like for each point they render the shadow image and then the corresponding marker image before moving down to the next point. If the next marker is pretty close to the southwest of the previous marker, its shadow image falls onto that previous marker.
To make sure I wasn't seeing some sort of illusion, as an exercise I put together a map with a couple of big, overlapping shadowed markers. What I'd hope for would be to have the images layered, bottom to top:
- East Greenland Shadow
- Greenland Shadow
- East Greenland Marker
- Greenland Marker
Instead, they appear to be layered:
- East Greenland Shadow
- East Greenland Marker
- Greenland Shadow
- Greenland Marker
with the Greenland Shadow falling on the East Greenland Marker.
So, can I get all of the markers to appear, collectively, in front of all the shadows? I can't track it down at the moment, but I believe I saw a list of standard Google Maps layers somewhere, which included something like a non-clickable "Shadow Layer". When I create a google.maps.KmlLayer with standard icons, the API automatically pulls up the corresponding shadow images and places those on what I guess is the Shadow Layer, which sits entirely behind the KmlLayer I asked for.
In my current project, I need a geoxml3 marker layer, so I can programatically access the placemarks. Since I can actually work with 32x32 icons, in this case I can just fall back to using a KmlLayer for the shadows, but for future reference it would be great to have the option of a non-clickable geoxml3 layer that sits entirely behind a clickable layer. Is there a way to do that? Would that be a matter of somehow rendering onto that Google Maps Shadow Layer?
Here's the script:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(71, -45),
zoom: 4,
preserveViewport: true
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Shadow Layer
var shadow = new geoXML3.parser({
map: map,
zoom: false,
markerOptions: {clickable: false}
});
shadow.parse('greenland_shadow_5.kml');
// Marker Layer
var blues = new geoXML3.parser({
map: map,
singleInfoWindow: true,
zoom: false,
suppressDirections: true,
markerOptions: {
shape: {
type: 'circle',
coords: [38,38,38]
}
}
});
blues.parse('greenland_5.kml');
}
google.maps.event.addDomListener(window, 'load', initialize);
The two KML files are identical except for the IconStyles:
<IconStyle>
<Icon>
<href>bluemarker_76x128.png</href>
<scale>1.0</scale>
</Icon>
<hotSpot x="38" y="0" xunits="pixels" yunits="pixels" />
</IconStyle>
versus:
<IconStyle>
<Icon>
<href>markershadow_188x128.png</href>
<scale>1.0</scale>
</Icon>
<hotSpot x="96" y="0" xunits="pixels" yunits="pixels" />
</IconStyle>