View Full Version : More than 1 image overlay?

11-24-2012, 12:35 AM
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'),

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

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%';

// 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();

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() {

// 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') {
} else {

USGSOverlay.prototype.toggleDOM = function() {
if (this.getMap()) {
} else {


11-24-2012, 09:42 PM
hmmm nobody wants to help me out here? is it because nobody knows or am i posting this in the wrong forum?


11-25-2012, 04:19 PM
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.

11-25-2012, 09:13 PM
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


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

11-27-2012, 11:14 PM
Sunfighter, did you manage to find time to look into the code and example? please i really need a way to figure this out..

12-09-2012, 01:51 PM
come on guys, ive been waiting for more than 2 weeks, nobody wants to look at this?

12-09-2012, 03:35 PM
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);
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

12-09-2012, 10:00 PM
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>

Do i need to add some other code above that?

12-09-2012, 10:45 PM
<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 ;)