Google Maps: How to move zoom controls?

Question

How can I move the Google Maps zoom controls, via the API, to the opposite side of the map?

Answer 1

var myOptions = {
                zoom: 6,

                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.SMALL,
                    position: google.maps.ControlPosition.LEFT_CENTER
                },

                scaleControl: true,
                panControl: true,
                navigationControl: false,              
                mapTypeId: 'roadmap',
                streetViewControl: false,
                center: new google.maps.LatLng(XXX,XXX)
            }

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

Answer 2

Assuming you're using version 2 of the API:

map.addControl(new GLargeMapControl3D(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10)));

Note that the GSize will position it where you want. If you want further down than give a higher value to the second parameter

Answer 3

here I am using google maps api v3 because v2 is deprecated

    function initialize()
    {
    var mapProp = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:7,
    panControl:false,
    zoomControl:true,
    zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL,
    position: google.maps.ControlPosition.RIGHT
    },
    mapTypeControl:false,
    scaleControl:false,
    streetViewControl:false,
    overviewMapControl:false,
    rotateControl:false,    
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

Answer 4

Use this in css:

.gmnoprint:nth-child(9) { left: 50%; }

Answer 5

From documentation the following control positions are supported:

• TOP_CENTER indicates that the control should be placed along the top center of the map.
• TOP_LEFT indicates that the control should be placed along the top left of the map, with any sub-elements of the control "flowing" towards the top center.
• TOP_RIGHT indicates that the control should be placed along the top right of the map, with any sub-elements of the control "flowing" towards the top center.
• LEFT_TOP indicates that the control should be placed along the top left of the map, but below any TOP_LEFT elements.
• RIGHT_TOP indicates that the control should be placed along the top right of the map, but below any TOP_RIGHT elements.
• LEFT_CENTER indicates that the control should be placed along the left side of the map, centered between the TOP_LEFT and BOTTOM_LEFT positions.
• RIGHT_CENTER indicates that the control should be placed along the right side of the map, centered between the TOP_RIGHT and BOTTOM_RIGHT positions.
• LEFT_BOTTOM indicates that the control should be placed along the bottom left of the map, but above any BOTTOM_LEFT elements.
• RIGHT_BOTTOM indicates that the control should be placed along the bottom right of the map, but above any BOTTOM_RIGHT elements.
• BOTTOM_CENTER indicates that the control should be placed along the bottom center of the map.
• BOTTOM_LEFT indicates that the control should be placed along the bottom left of the map, with any sub-elements of the control "flowing" towards the bottom center.
• BOTTOM_RIGHT indicates that the control should be placed along the bottom right of the map, with any sub-elements of the control "flowing" towards the bottom center.

Source: https://developers.google.com/maps/documentation/javascript/controls

---

e.g.:

const options: google.maps.MapOptions = {
  // your options
  zoomControlOptions: {
    position: google.maps.ControlPosition.LEFT_BOTTOM
  }
};

const map = new google.maps.Map(document.getElementById('map'), MAP_DEFAULT_OPTIONS);