Move zoom bar to the right with Google Maps API v3

Question

I'm looking to move the zoom controls in the Google Maps Javascript API from the left to the right. If we leave the default setup we have this:

If I move it over like so:

panControl: true,
  panControlOptions: {
  position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
  style: google.maps.ZoomControlStyle.LARGE,
  position: google.maps.ControlPosition.RIGHT_TOP
}

Then we get this:

I've also noticed that if you set it to the left (not default), you get:

Ideally I would like it on the right and centered to the pan controls just like the default settings but on the other side. Is there anyway of doing this?

Answer 1

Yes, you can do it. You have to put both panControl and zoomControl into one position - either google.maps.ControlPosition.TOP_RIGHT or google.maps.ControlPosition.RIGHT_TOP.

Use either:

panControl: true,
panControlOptions: {
  position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
  style: google.maps.ZoomControlStyle.LARGE,
  position: google.maps.ControlPosition.TOP_RIGHT
}

or:

panControl: true,
  panControlOptions: {
  position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
  style: google.maps.ZoomControlStyle.LARGE,
  position: google.maps.ControlPosition.RIGHT_TOP
}

A simple explanation is that Google maps have a container at each controls position. Each of these containers is positioned and scaled such that all the required controls fit in. A control is then centered if there's some remaining space (in this case the width of the container is specified by the width of panControl). If you put the controls into separate positions, they are put into separate containers which are scaled and positioned appropriately.