PDA

View Full Version : Resolved 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.

<!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 (http://azoomer.com/show-map-controls-on-hover.html)
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