Google Map Changes not being rendered in browser - google-maps

Question

This is my javaScript code.
(function() {
window.onload = function() {
// Creating a reference to the mapDiv
var mapDiv = document.getElementById('map');
// Creating a latLng for the center of the map
var latlng = new google.maps.LatLng(37.09, -95.71);
// Creating an object literal containing the properties
// we want to pass to the map
var options = {
center: latlng,
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(mapDiv, options);
}
})();
When i add the disableDefaultUI: true to the options variable and test it on my Browsers(Opera,Firefox,Chrome Canary) it does not disable the UI. I am currently using Eclipse Indigo on My Mac OSX version 10.6.8. Is there a problem with my browsers cache or something? My code seems to be okay. I can't understand why it does not render on the browsers.
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};

Answer 1

I can't remember exactly why the disableDefaultUI property didn't do anything on maps I've worked on recently. The way I got round it was to control each ui element directly.
var options = {
// Required map properties here
// Set how Zoom is to look
zoomControl : true,
zoomControlOptions : {
style : google.maps.ZoomControlStyle.SMALL,
position : google.maps.ControlPosition.TOP_LEFT
}
}
While the example above modifies the Zoom controls to the compact plus and minus rather than slider, you can turn if off using:
zoomControl : false
All the other UI elements have these type of controls also. You can see them all here