More than 1 image overlay?

[alwaysme]

Hello there

I have this code below which adds an image on top of google maps as an overlay. Does anyone here have enough knowledge to overlay more than just 1 image? Because the google tutorial only shows an example of adding 1 ground overlay as opposed to multiple ones, and i am not qualified enough to figure out how to add additional images. Honestly I am looking for 3 additional JPGs to add on top of the one currently shown below (each with its own bounds i.e NE/SW coordinates).

  var overlay;

      USGSOverlay.prototype = new google.maps.OverlayView();

      function initialize() {
        var myLatLng = new google.maps.LatLng(38.327571, 12.039479);
        var mapOptions = {
          zoom: 11,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.SATELLITE
        };

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

		var swBound = new google.maps.LatLng(38.279754, 12.949523);
        var neBound = new google.maps.LatLng(38.390712, 12.156325);
        var bounds = new google.maps.LatLngBounds(swBound, neBound);
		
		

        // Photograph courtesy of the U.S. Geological Survey
           var srcImage = 'urltoanimage.jpg';
        overlay = new USGSOverlay(bounds, srcImage, map);
      }

      function USGSOverlay(bounds, image, map) {

        // Now initialize all properties.
        this.bounds_ = bounds;
        this.image_ = image;
        this.map_ = map;

        // We define a property to hold the image's
        // div. We'll actually create this div
        // upon receipt of the add() method so we'll
        // leave it null for now.
        this.div_ = null;

        // Explicitly call setMap on this overlay
        this.setMap(map);
      }

      USGSOverlay.prototype.onAdd = function() {

        // Note: an overlay's receipt of add() indicates that
        // the map's panes are now available for attaching
        // the overlay to the map via the DOM.

        // Create the DIV and set some basic attributes.
        var div = document.createElement('div');
        div.style.border = 'none';
        div.style.borderWidth = '0px';
        div.style.position = 'absolute';

        // Create an IMG element and attach it to the DIV.
        var img = document.createElement('img');
        img.src = this.image_;
        img.style.width = '100%';
        img.style.height = '100%';
        div.appendChild(img);

        // Set the overlay's div_ property to this DIV
        this.div_ = div;

        // We add an overlay to a map via one of the map's panes.
        // We'll add this overlay to the overlayImage pane.
        var panes = this.getPanes();
        panes.overlayImage.appendChild(this.div_);
      }

      USGSOverlay.prototype.draw = function() {

        // Size and position the overlay. We use a southwest and northeast
        // position of the overlay to peg it to the correct position and size.
        // We need to retrieve the projection from this overlay to do this.
        var overlayProjection = this.getProjection();

        // Retrieve the southwest and northeast coordinates of this overlay
        // in latlngs and convert them to pixels coordinates.
        // We'll use these coordinates to resize the DIV.
        var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
        var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

        // Resize the image's DIV to fit the indicated dimensions.
        var div = this.div_;
        div.style.left = sw.x + 'px';
        div.style.top = ne.y + 'px';
        div.style.width = (ne.x - sw.x) + 'px';
        div.style.height = (sw.y - ne.y) + 'px';
      }

      USGSOverlay.prototype.onRemove = function() {
        this.div_.parentNode.removeChild(this.div_);
      }

      // Note that the visibility property must be a string enclosed in quotes
      USGSOverlay.prototype.hide = function() {
        if (this.div_) {
          this.div_.style.visibility = 'hidden';
        }
      }

      USGSOverlay.prototype.show = function() {
        if (this.div_) {
          this.div_.style.visibility = 'visible';
        }
      }

      USGSOverlay.prototype.toggle = function() {
        if (this.div_) {
          if (this.div_.style.visibility == 'hidden') {
            this.show();
          } else {
            this.hide();
          }
        }
      }

      USGSOverlay.prototype.toggleDOM = function() {
        if (this.getMap()) {
          this.setMap(null);
        } else {
          this.setMap(this.map_);
        }
      }

thanks!

[alwaysme]

hmmm nobody wants to help me out here? is it because nobody knows or am i posting this in the wrong forum?

thanks!

[sunfighter]

I can not answer for anyone else on the forum but personally have never used google maps outside of GSAK, a totally separate program. I did load your code into my editor and ran it through WAMP and all I got was a blank page. I normally assume when that happens that all the needed code is not there and I do try to furnish it if I can. In this case I have no idea what's missing [although it's probably some html to call functions] and so stopped trying to find an answer to your question.

[alwaysme]

Hello Sunfighter, hope you are well

Yes i think its because you need to add basic html for it to work. Here is the example i took from google

https://developers.google.com/maps/d...rlays#HideShow

click the link that says show "View example (overlay-hideshow.html)"

[alwaysme]

Sunfighter, did you manage to find time to look into the code and example? please i really need a way to figure this out..

[alwaysme]

come on guys, ive been waiting for more than 2 weeks, nobody wants to look at this?

[AndrewGSW]

My guess would be

    var swBound = new google.maps.LatLng(38.279754, 12.949523);
    var neBound = new google.maps.LatLng(38.390712, 12.156325);
    var bounds = new google.maps.LatLngBounds(swBound, neBound);

    // Photograph courtesy of the U.S. Geological Survey
    var srcImage = 'urltoanimage.jpg';
    overlay = new USGSOverlay(bounds, srcImage, map);
    // ADD THE FOLLOWING
    swBound = new google.maps.LatLng(38.000, 12.000); // change these numbers
    neBound = new google.maps.LatLng(38.000001, 12.000001); // and these
    bounds = new google.maps.LatLngBounds(swBound, neBound);

    srcImage = 'urltoanOTHERimage.jpg';
    var overlay2 = new USGSOverlay(bounds, srcImage, map);
    // and repeat for overlay3

[alwaysme]

well that worked, i would upgrade your rank if i could!

Only issue is when i use the toggle button, it just works for the first overlay, i added a new button but it does not function at all and does not hide the second overlay


<div id ="toolbar" style="width: 100%; height:20px; text-align:center">
<input type="button" value="Toggle Visibility Overlay 1" onclick="overlay.toggle();"></input><br />
<input type="button" value="Toggle Visibility Overlay 2" onclick="overlay2.toggle2();"></input>
</div>



Do i need to add some other code above that?

[AndrewGSW]

<input type="button" value="Toggle Visibility Overlay 2" onclick="overlay2.toggle2();"></input>

Unless you have created a new prototype called toggle2 then this should just be toggle().

There is a reputation button on the left of my post (a gold medal) or a larger thank you button on the right