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://stackguides.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>