Possible to add ground overlay to google map with stored image?

Question

I am having difficulties trying to add an image as a ground overlay to a google map that I am creating. In all of the help files that I have seen, the image has been passed to the ground overlay function as a url. Is it possible to have an image that is stored on my machine passed in, rather than an online image?

Here's the code I have for the map & overlay:

    function initialize() {
        var mapOptions = {
            center: {lat: 45.3469, lng: -75.7594},
            zoom: 10,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var imageBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(45.2118075, -75.4455767),
        new google.maps.LatLng(45.2043559, -75.4545309));

        var campusOverlay = new google.maps.GroundOverlay('Campus.JPG', imageBounds);
            campusOverlay.setMap(map);
    }

I am looking to add the 'Campus.jpg' image that I created to the map. I have also tried passing in the entire path with all its directories and still nothing appears on the map. If there is no way of passing an image like this, is there a way to put the image online and use it that way?

Thanks

Answer 1

Pass in a full url to the image as the first parameter for GroundOverlay and make sure that your bounds are correct. This can be kind of tricky. Your overlay should cover a northern lat and southern lat/east and west longitude, so you essentially have some sort of rectangular area. Here is a quick example. Sure you will get the idea.

var overlay;

function initialize() {

  var center = new google.maps.LatLng(45.3469, -75.7594);
  var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(45.2, -76.1),
    new google.maps.LatLng(45.5, -75.38)
  );

  var mapOptions = {
    zoom: 10,
    center: center,
    disableDefaultUI: true
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);

  overlay = new google.maps.GroundOverlay(
    'https://upload.wikimedia.org/wikipedia/commons/e/ee/Dowarian%2C_Neelam_Valley%2C_AJK_Pakistan.JPG',
    imageBounds);
  overlay.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>

Hope that helps.