Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    More than 1 image overlay?

    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).



    Code:
      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!
    Last edited by alwaysme; 11-24-2012 at 01:29 AM.

  • #2
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hmmm nobody wants to help me out here? is it because nobody knows or am i posting this in the wrong forum?

    thanks!

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 662 Times in 661 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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)"

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sunfighter, did you manage to find time to look into the code and example? please i really need a way to figure this out..

  • #6
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    come on guys, ive been waiting for more than 2 weeks, nobody wants to look at this?

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    My guess would be

    Code:
        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
    Last edited by AndrewGSW; 12-09-2012 at 03:37 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    alwaysme (12-10-2012)

  • #8
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    <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
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •