I've got a google map page on my website where I want to load a series of KMZ files showing blocks of land. I am generating the KMZs in Google Earth which are made up of an Image Overlay and a series of Polygons. I first load the Image Overlay, which is a PNG made up of black lines and transparent background - this shows the boundary lines of the plots of land. Then I draw polygons over this image to group related plots. Before exporting the KMZ from Google Earth I make sure the image is displayed in the foreground, above the polygons. However, after exporting and loading the KMZ into the Google Map on my webpage, the Image Overlay is loaded at the back with the polygons layered on top, obscuring the boundary-line details shown in the image.
I have tried the following options in Google Earth to bring the image to the top, none of which result in the correct layering in my map:
However, every one of these attempts still results in the KMZ being displayed incorrectly in my webpage - the Image Overlay is displayed at the back:
I've also attempted putting the polygons into one KMZ and the Image Overlay into another, loading each separately into my map with a higher zIndex for the KMZ with the image, and the Image Overlay is still layered below the polygons.
In terms of my client-side code to add the KMZ files (in case I'm doing something wrong there), I get the URL for each KMZ and pass it into the following method:
function addKMZFile(myMap, kmzUrl) {
var kmzLayer = new google.maps.KmlLayer({
url: kmzUrl,
preserveViewport: true,
map: myMap,
clickable: true
});
}
I've uploaded an example KMZ to my file server, which can be used for testing purposes (the KMZ is added to my map with the method above): http://bassmanjase.altervista.org/SO_Test.kmz
I can't seem to see any specific mention in the Google Maps KML documentation about image-overlay or how layering within KML is carried out. Is there a way to configure the KML so that the Image Overlay is layered above the Polygons when being displayed in Google Maps?
Since there doesn't appear to be a way to render the overlay above the polygons natively in Google Maps, the workaround I've gone with is to reduce the opacity of the polygons so that the overlay is visible below them.
This also gives the added benefit that the underlying map imagery is somewhat visible (since my overlay has a transparent background):