Google Maps API Examples # 2: Hiding Map Controls

Cross-post of the second small article on the topic Google Maps API from my blog . This time we will talk about how to hide the map controls.

HIDE CARD CONTROLS

If you do not want the controls not clutter up your card, then they can be very easily hidden. When you hover the mouse, they will reappear, and as soon as the mouse pointer is moved out of the area bounded by the div with the map, they will disappear.
To do this, add the following code, after in the function init(), you initialize the card and connect the controls to it:

map.hideControls ();

But that's not all: if you leave everything as it is, then the controls will not appear. In order for them to appear when you hover over a div and disappear when the pointer leaves the zone of this div, you need to insert the following code immediately after the previous one:

GEvent.addListener (map, "mouseover", function () {
map.showControls ();
});
GEvent.addListener (map, "mouseout", function () {
map.hideControls ();
});

Everything turned out to be very, very simple! A working example is here .