Your bounds is wrong for your groundOverlay.
according to the documentation for the constructor for a google.maps.LatLngBounds object:
Constructor
LatLngBounds(sw?:LatLng, ne?:LatLng) Constructs a rectangle from the points at its south-west and north-east corners.
The arguments should be SW, NE. Your arguments are SE, NW. Your code:
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-38.374615, 144.823766), //SE
new google.maps.LatLng(-38.373628, 144.821631) //NW
);
If I swap the longitudes between the two points it works:
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-38.374615, 144.821631), //SW
new google.maps.LatLng(-38.373628, 144.823766) //NE
);
proof of concept fiddle
code snippet:
var historicalOverlay;
var myLatlng = new google.maps.LatLng(-38.374058, 144.822763);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 18,
center: myLatlng
});
var markerNW = new google.maps.Marker({
position: new google.maps.LatLng(-38.374615, 144.823766),
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
},
title: "SW"
});
var markerSE = new google.maps.Marker({
position: new google.maps.LatLng(-38.373628, 144.821631),
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
},
title: "NE"
});
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-38.374615, 144.821631),
new google.maps.LatLng(-38.373628, 144.823766));
historicalOverlay = new google.maps.GroundOverlay(
'http://www.ryecemetery.com.au/images/layout-06a.jpg',
imageBounds);
historicalOverlay.setMap(map);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
