Playing with Map controls

by Shreerang Patwardhan

HTML

<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>

JavaScript

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 });
    })
}