如何在 Google 地图中的“Google”标签上方定位自定义地图控件？

Question

I have this so far.

Sorry for the blinkiness my computer screenshots isn't working so I gotta resort to this thing.

Anyways, the "Satellite" button should go above the "Google" sign with some space below, and left aligned. I have essentially this:

container = document.createElement("div")
ReactDOM.render(<div>Satellite</div>, container)
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(container)

mapOptions =
  disableDefaultUI: true
  zoomControl: true
  zoom: 13
  styles: [{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}]
  mapTypeControl: true

map.setOptions(mapOptions)

What am I doing wrong? I would like to not have to resort to CSS hacks if possible.

Answer 1

You can set the position of the controls by using

map.setOptions({
    mapTypeControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT
    }
})

or any of the enums listed here with a demo here .

It's not possible to set a custom pixel or % position on those controls without resorting to custom CSS.

This is perfectly fine, even the official docs provide examples for this !

In your case that would mean, for instance,

.gmnoprint + .gmnoprint {
    left: -4px !important;
    bottom: 20px !important;
}

resulting in

---

What's usually done in these situations is hiding the google-default controls, creating your own div s and button s and then binding their click events to the gmaps API.

With that being said, after you've created & positioned a button to turn on the satellite map type, the listener's content can be as simple as

map.setOptions({
    mapTypeId: google.maps.MapTypeId.SATELLITE
})

and getting the currently set ID is returned calling map.getMapTypeId() .