Overlay marker extension on Google Maps?

Question

I can draw overlay elements on Google maps just fine, the image looks like this:

______ | | ______ \/ 

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

I want it to be smaller than this, only with the image when it was not pressed, but when it is clicked on it, it expands for about a second, so that:

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

Is it possible?

Answer 1

Use this ...

• No Balloons: https://github.com/jgilfelt/android-mapviewballoons#readme

• Icon Balloons (Extends Jeff Gilfelt): https://github.com/galex/android-mapviewballoons

Answer 2

Create a custom overlay and in the onAdd override onAdd create a custom div that has the necessary 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 redefinition of draw you decide where to place it on the map. In the draw, you can first draw a marker using the click event handler, which sets the visibility to 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 }