Google Maps GroundOverlay

Question

I am attempting to get a Google maps GroundOverlay working without luck. Searched everywhere, read the Google reference documentation, still no lucK.

What I have attempted can be seen at:

http://www.ryecemetery.com.au/locate.html

Very basic code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_SJakjgkzjvWoMu7T-DqsUDWUEbfUtTA"></script>
</head>
<body>
    <div style="width: 1200px; height: 800px" id="map-canvas"></div>
    <script>
    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 imageBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-38.374615, 144.823766),
        new google.maps.LatLng(-38.373628, 144.821631)
    );

    historicalOverlay = new google.maps.GroundOverlay(
        'http://www.ryecemetery.com.au/images/layout-06a.jpg',
        imageBounds);
    historicalOverlay.setMap(map);
  </script>
</body>
</html>

You can see that some sort of overlay is placed on the map. I believe I have the sw, ne latlng correct. If I check on Google maps by right clicking and choosing "whats here" those are the latlng that is given.

I have the overlay in png, gif and jpeg. With the png and gif I get nothing to appear.

Where have I gone wrong?

thanks

Ken

score 0 · Accepted Answer · edited Aug 20 '15 at 14:13

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>

@MrUpsidown thanks for the answer, It worked perfectly once I got the right co-ords, somehow had NW, SE stuck in my head :-( A sample of a working page is at the original URL if interested. Sorry I have not replied until now but I have been quite ill since posting question until today. — Ken, Aug 27 '15 at 06:48
Your thanks should go to @geocodezip. I only edited the answer ;-) — MrUpsidown, Aug 27 '15 at 08:13

Google Maps GroundOverlay

1 Answers1

Linked