Reorder on Google Map

Question

I have a Google map with some controls in the lower right corner (the remaining 3 corners are already taken, so they should all be in the same corner). I installed it like this:

mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE], position: google.maps.ControlPosition.RIGHT_BOTTOM }, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position: google.maps.ControlPosition.RIGHT_BOTTOM }, streetViewControlOptions: { position: google.maps.ControlPosition.RIGHT_BOTTOM } 

This leads to the following result:

... this looks silly, so I tried switching mapTypeControl to the BOTTOM_RIGHT position:

Ideally, this is what I would like (just like the first one, but with mapTypeControl below):

I dug API documents, and while there seems to be a way to control the order of user controls, I see no way to reconfigure my own. It can be done? If this is not possible to do as in my last example, is there at least the best way to organize the controls, so none of them stick out like a sore thumb?

Answer 1

According to ControlPosition Controls that are added first are positioned closer to the edge of the map.

And for the position RIGHT-BOTTOM Elements are positioned on the right, above bottom-right elements, and flow upwards. .

However, this seems to contradict what seems to be happening with yours. Since you just apply all the controls as part of the MapOptions specification, I wonder if this just means that it applies when adding custom controls, as another part of the developer’s guide mentions (as you already said).

Perhaps you could create your own custom controls, which are really just an extension of the StreetView / MapType / Zoom controls? However, they are not like you can just instantiate any of these controls ... what do you get if you do console.log(map.controls) ?