function initialize() { var myOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, "mouseover", function() { map.setOptions({ disableDefaultUI: false }); }) google.maps.event.addListener(map, "mouseout", function() { map.setOptions({ disableDefaultUI: true }); }) }
<html> <head> <title>Google Maps JavaScript API v3 Example: Controlling Map UI</title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> <!-- Copy the javascript code here in case you are trying this code. --> </script> </head> <body onload="initialize()"> <div id="map_canvas" style="height: 230px; width: 550px" align="centre"></div> </body> </html>