2

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

DavidDomain
  • 14,976
  • 4
  • 42
  • 50
Cameron Fedy
  • 61
  • 1
  • 7
  • I think your problem is due to the fact that the image must be identified by a valid url and not from a local reference to the file – ScaisEdge Jun 25 '15 at 21:01
  • I agree that might be the problem, any advice as to how I can make the local reference into a url? – Cameron Fedy Jun 25 '15 at 21:05
  • The simplest way It is that you save your pictures on an internet server. Today there are many free hosting services where you can place the files that you need with FTP – ScaisEdge Jun 25 '15 at 21:17

1 Answers1

0

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.

DavidDomain
  • 14,976
  • 4
  • 42
  • 50