How to rotate a KML Layer containing a GroundOverlay in Google Maps v3

Question

I have loaded a historic map image into Google Earth Pro and adjusted its position, stretched and rotated it until it aligns with the ground reasonably well.

From Google Earth I saved this as a KML and uploaded it so both the KML and the image are publicly available

The KML file is copied below. It includes a rotation, and the color includes an alpha component.

However, the image is not rotated and the alpha is ignored - so the image is opaque.

I tried loading the image directly as a GroundOverlay, but this has no rotation option in google maps api v3.

My question is how do I overlay the image on the map with a rotation and how can I make it partially transparent?

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: -37.83433865, lng:  144.96147273999998 }
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'https://storage.googleapis.com/historic_map_overlays/MMBW_1264.kml',
    map: map
  });
}

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>https://stackoverflow.com/questions/ask#

    <?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<GroundOverlay>
    <name>MMBW_1264</name>
    <color>ccffff80</color>
    <Icon>
        <href>https://storage.googleapis.com/historic_map_overlays/DetailPlan_1264_alpha.jpg</href>
        <viewBoundScale>0.75</viewBoundScale>
    </Icon>
    <LatLonBox>
        <north>-37.784899</north>
        <south>-37.788269</south>
        <east>144.996226</east>
        <west>144.989129</west>
        <rotation>27.57004115033846</rotation>
    </LatLonBox>
</GroundOverlay>
</kml>

Answer 1

Related question: Unable to rotate kml layer

<rotation/> is not supported in KmlLayer, see https://developers.google.com/maps/documentation/javascript/kmllayer#supported-elements for supported elements

One option would be the third party KML parser geoxml3 which supports the <GroundOverlay> <rotation> tag. (Disclaimer: I am currently the maintainer).

example with your KML

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: {
      lat: 0,
      lng: 0
    },
    zoom: 0
  });
  infowindow = new google.maps.InfoWindow({});

  var geoXml = new geoXML3.parser({
    map: map,
    infoWindow: infowindow,
    singleInfoWindow: true,
  });
  geoXml.parseKmlString(kmlData);
}
google.maps.event.addDomListener(window, 'load', initMap);

var kmlData = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"><GroundOverlay><name>MMBW_1264</name><color>ccffff80</color><Icon>        <href>https://storage.googleapis.com/historic_map_overlays/DetailPlan_1264_alpha.jpg</href><viewBoundScale>0.75</viewBoundScale></Icon><LatLonBox><north>-37.784899</north>   <south>-37.788269</south><east>144.996226</east><west>144.989129</west> <rotation>27.57004115033846</rotation></LatLonBox></GroundOverlay></kml>';

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3@master/kmz/ZipFile.complete.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3@master/kmz/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3@master/ProjectedOverlay.js"></script>
<div id="map_canvas"></div>