Question

How would I go about displaying the default Google Maps controls when the user hovers over the map? Otherwise, I would like the controls to be hidden.

Answer 1

You may use the setOptions-method of the map to hide or show the controls. Pass as argument an object with all controlOptions you want to show/hide and set the values of the controls to true or false.

Add eventlisteners for mouseout and mouseover to the map and set the options there.

Example:

//the controls you want to hide
  var controlsOut={
                    mapTypeControl:false,
                    zoomControl:false,
                    panControl:false,
                    streetViewControl:false
                  };

  //create a copy of controlsOut and set all values to true
  var controlsIn={};

      for(var c in controlsOut)
      {
        controlsIn[c]=true;
      }

   //initially hide the controls
    map.setOptions(controlsOut)

   //add listeners to show or hide the controls
        google.maps.event.addDomListener(map.getDiv(),
                                 'mouseover', 
                                 function(e)
                                 {
                                    e.cancelBubble=true;
                                    if(!map.hover)
                                    {
                                      map.hover=true;
                                      map.setOptions(controlsIn);
                                    }
                                  });

        google.maps.event.addDomListener(document.getElementsByTagName('body')[0], 
                                 'mouseover', 
                                 function(e)
                                 {
                                  if(map.hover)
                                  {
                                     map.setOptions(controlsOut);
                                     map.hover=false;
                                  }
                                 });