Move zoom bar to the right with Google Maps API v3

ingh.am picture ingh.am · Nov 8, 2011 · Viewed 13.1k times · Source

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: default google api

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:

right api

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

left

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

Tomik picture Tomik · Nov 8, 2011

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.