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