How to add text over the top of a google map so that the text does not move when panning - google-maps

Question

I am working on a HTML5 application designed to run a Google map which takes up the entire screen on a mobile phone. For the sake of simple debugging, and perhaps later for legitimate informational purposes, I would like to position some text in the bottom right hand corner of the map, which reports some information, such as the current lat/lng of the user. I have looked through the v3 API, and to the best of my knowledge there's nothing in there to do this. Is there any kind of workaround that would permit this to be done?

Answer 1

Pretty easy really. Add a div as a control. Define an empty div anywhere in your html. Add it as a control, and Maps sucks it into the map display. Then write to it with any DOM functions you wish.
<div id="debug"></div>
-- code goes here --
var x = document.getElementById("debug");
mapName.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(x);
-- code goes here --
$("#debug").html("debugging info")
Hope that is enough to get the idea across.
In my example I put it in RIGHT_BOTTOM. Other options are here.
Skip

Answer 2

It might be too much work to implement an overlay. For debugging purposes, you're better off using the console logging options from FireBug (or a similar tool). As for the legitimate information, if it's geo-specific, you could use the InfoWindow.
If the data isn't geo-specific, it's probably best displayed outside of the map (You could resize it to be < 100%). Hope that helps.