I need to rearrange the default controls in the Google Map (v3, 3.4) API.

Everything is in place and works, but when I add the mapTypeControl, zoomControl, the streetViewControl and the panControl to the same ControlPosition (i.e. google.maps.ControlPosition.RIGHT_TOP), I can't define the order of how they are rendered.

mapTypeControl has a default of TOP_RIGHT, but changing it to RIGHT_TOP (the default of the other ones mentioned above) add's it to the bottom in this location:

Here's the code for the map options (nevermind the added OSM layer):

var mapOptions = {
zoom: 12,
center: def_center, // is set before this snippet    
mapTypeControl: true,
mapTypeId: user_maptype, // is set before this snippet
mapTypeControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP,
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, "openstreetmap"]
},
zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.DEFAULT,
    position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: false,
panControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: false,
scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_RIGHT
}
};

I need the mapTypeControl to be the first element to be rendered (above the streetViewControl). Any idea how to do this?

I need to rearrange the default controls in the Google Map (v3, 3.4) API.

Everything is in place and works, but when I add the mapTypeControl, zoomControl, the streetViewControl and the panControl to the same ControlPosition (i.e. google.maps.ControlPosition.RIGHT_TOP), I can't define the order of how they are rendered.

mapTypeControl has a default of TOP_RIGHT, but changing it to RIGHT_TOP (the default of the other ones mentioned above) add's it to the bottom in this location:

Here's the code for the map options (nevermind the added OSM layer):

var mapOptions = {
zoom: 12,
center: def_center, // is set before this snippet    
mapTypeControl: true,
mapTypeId: user_maptype, // is set before this snippet
mapTypeControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP,
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, "openstreetmap"]
},
zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.DEFAULT,
    position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: false,
panControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: false,
scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_RIGHT
}
};

I need the mapTypeControl to be the first element to be rendered (above the streetViewControl). Any idea how to do this?

• javascript
• google-maps

• 2 did you ever find a solution to reordering this? i added a custom control and can put it above or below with index 1/0, but I can't update the index of the default controls (specifically panControl) – tester Commented Oct 6, 2011 at 21:19

2 Answers 2

This code works fine in the google code editor @ http://code.google./apis/ajax/playground/#control_position_v3

in the end the solution was to use TOP_RIGHT instead of RIGHT_TOP

Additionally the index property can be changed via setAttribute just like a majority of the other properties.

function initialize() {
   var mapDiv = document.getElementById('map-canvas');
   var map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
      mapTypeControlOptions: { 
         position: google.maps.ControlPosition.TOP_RIGHT
      }, 
      zoomControl: true, 
      zoomControlOptions: { 
         style: google.maps.ZoomControlStyle.DEFAULT, 
         position: google.maps.ControlPosition.RIGHT_TOP 
      }, 
      streetViewControl: true, 
      streetViewControlOptions: { 
         position: google.maps.ControlPosition.RIGHT_TOP 
      }, 
      panControl: false, 
      panControlOptions: { 
         position: google.maps.ControlPosition.RIGHT_TOP 
      }, 
      scaleControl: false, 
      scaleControlOptions: { 
         position: google.maps.ControlPosition.BOTTOM_RIGHT 
      } 
   });
}

I don't realy have a solution unfortunately but acording to this page Google Map API V3 Controls user defined controls can be placed before the default ones by changing their index in DOM. Might this be the same problem, that the zoom-control has a lower index than the map/satelite control?
Not sure how you would go about changing the index but it might be an avenue to find a solution.

Oh and if you do find out how to solve it please paste your solution here. Might e in handy.