Question

I am trying to get started with the Google Maps API, but I’m finding the documentation incredibly confusing. Does anyone know how to find the coordinates for an image for a ground overlay?

I copied the code here (https://developers.google.com/maps/documentation/javascript/overlays#GroundOverlays) and have it working on my website with my image. But when I try to change the coordinates from Newark to my location, the image does not appear at all. I’ve just been guesstimating the coordinates for the imageBounds and I’m guessing that’s what is causing it not to work. Any help would be most appreciated.

This is my code (the LatLng coordinates are copied from the example):

      function initialize() {

  var newark = new google.maps.LatLng(40.740, -74.18);
  var imageBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(40.712216,-74.22655),
      new google.maps.LatLng(40.773941,-74.12544));

  var myOptions = {
    zoom: 13,
    center: newark,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var oldmap = new google.maps.GroundOverlay(
      "http://www.mcography.com/beta/Accessibility_Map.png",
      imageBounds);
  oldmap.setMap(map);
}

Answer 1

I use the LatLng Marker and LatLng tooltip options of maps.google.com labs (link is in the right bar – bottom). Once I get it close, I simply make small tweaks to my LatLng numbers.

Also it looks like you may be using the wrong corners for your LatLngBounds box. It should be Southwest (bottom left) then Northeast (top right). Using the wrong corners has the effect of not showing an image.