Expanding Overlay Marker on Google Maps?

Question

Hello everyone,

I can draw overlay items onto google maps just fine, an image that looks like:

______
|    |
______
  \/

Where the "\/" part is the "pin" that marks the lat/lon on the map and a picture in the middle of it. My question is, is there any way to expand this when the user clicks on it? I'll of course have to change this to some kind of dialog or layout and change it when it gets clicked.

I want to have it smaller like that with just an image when not clicked on, but when it is clicked on it expands over like a second to:

--------------------------------------
| <image>                  <buttons> |
|                          <buttons> |
| <some info here>                   |
|                                    |
--------------------------------------
                 \/

Is this possible?

Answer 1

Create a custom overlay, and in the onAdd override, create a custom div that has your required content layout.

myOverlay.prototype.onAdd = function(){
  var div = document.createElement('DIV');
  div.style.position = 'absolute';  // so we can position it later.
  // populate the div
  this.div_ = div;
  this.getPanes().overlayLayer.appendChild(div);
}

Now in the draw override you decide where to place it on the map. In the draw you could draw the marker initially with an click event handler that sets visibility on the div.

myOverlay.prototype.draw = function(){
  var div = this.div_;
  //populate div with content as required.
  div.style.left = //calculate location based on width / height and centre 
  div.style.top = // ditto
}

Answer 2

(Due to my small reputation I have to add my comment as answer)

Hey Mantis, pls tell us, where u place this code? Are u sure, this is Java to use in MapView of Android?

Hey goon15, have u found a solution now? Pls post it.