Gmaps. Show map controls on hover

**azoomer** · 07-04-2010, 04:23 PM

Hi everyone. I have this googlemap that is showing the map controls when hovering over the map. It's working fine but I would like to customize it so that the controls are fading in and out. I have been trying with jQuery fadeIn and fadeOut because i don't know how to do that sort of thing in regular javascript. Unfortunately I haven't been able to get it working. Here is the basic page that I use.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show map controls on hover</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
<!--
#map { 
    width:600px; 
	height:450px; 
	margin-left:auto; 
	margin-right:auto; 
	margin-top:100px;
}
-->
</style>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAfsy1hWdPh-cLX96Wq6uPZhROrGGU8lj9GNY1SzmPUoO0fFMIyRSTBe0CnjuXXNP02VRRD_l5xdk3yA" type="text/javascript"></script>

</head>
<body>

<div id="map"></div>

<script type="text/javascript">
//<![CDATA[
/**
 * hoverControls method to hide/show GControls by 'mouseout'/'mouseover'
 * @author Esa 2006, 2008
 */
GMap2.prototype.hoverControls = function(){
  var theMap = this;
  theMap.hideControls();
  GEvent.addListener(theMap, "mouseover", function(){
    theMap.showControls();
  });
  GEvent.addListener(theMap, "mouseout", function(){
    theMap.hideControls(); 
  });
  theMap.libraryCard = 19162;
}
GMap.prototype.hoverControls = GMap2.prototype.hoverControls;

var start = new GLatLng(13.746201,100.530691)
var map = new GMap2(document.getElementById("map"));

map.addMapType(G_PHYSICAL_MAP);
map.addMapType(G_SATELLITE_3D_MAP);	
map.setCenter(start, 4, G_SATELLITE_MAP);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl3D());
map.enableDoubleClickZoom();
map.enableContinuousZoom();
map.enableScrollWheelZoom();
new GKeyboardHandler(map);	 

map.hoverControls(); // method called here

//]]>
</script>
</body>
</html>

And here is a link to a demo
So my question is does anybody have an idea as to how I could get the controls to FADE in and out on hover ( preferably with jQuery). That would be very nice. It works alright now but it has a flickering feeling to it if you mouse over the map quickly. Thought it would be nice to use hoverIntent as well.

**azoomer** · 07-04-2010, 08:49 PM

Ok problem solved

Thread: Gmaps. Show map controls on hover

Thread Tools

Search Thread

Gmaps. Show map controls on hover

Bookmarks

Bookmarks

Posting Permissions