Как я могу расположить пользовательские элементы управления в Google Maps V3?

Question

Я создал два пользовательских элемента управления в Картах Google на основе существующих примеров по умолчанию.Они работают хорошо, но я понял, что они отображаются по вертикали :

Но я хочу, чтобы они отображались по горизонтали :

Определения CSS для обоих пользовательских элементов управления выглядят одинаково (за исключением изображения, конечно):

// Add marker control
var optionDiv = document.createElement('div');

// Same for second control UI (centerPlayer) but for simplicity reasons not added
var CenterMarker = new centerMarkerButton (optionDiv, this.map);

    optionDiv.index = 1;
this.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(optionDiv);

...

function centerMarkerButton (controlDiv, map) {

        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.marginBottom = '8px';
        controlUI.style.marginRight = '10px';
        controlUI.style.paddingTop = '3px';
        controlUI.style.paddingLeft = '3px';
        controlUI.style.paddingRight = '3px';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.innerHTML = '<a><img src="https://www....centermarker.svg" height="28px" width="28px"</a>';
        controlUI.appendChild(controlText);

        // Add click event listener
        controlUI.addEventListener('click', function() {
            instance.centerGame();
        });
    }
}

        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.marginBottom = '8px';
        controlUI.style.marginRight = '10px';
        controlUI.style.paddingTop = '3px';
        controlUI.style.paddingLeft = '3px';
        controlUI.style.paddingRight = '3px';
        controlUI.style.paddingRight = '3px';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.innerHTML = '<a><img src="https://www..../centeruser.svg" height="28px" width="28px"</a>';
        controlUI.appendChild(controlText);

Анализ кода внутри отображаемых карт Google в браузере показал, что существует простой DIV вокруг обоих пользовательских элементов управления, но у него нет идентификатора, поэтому я не могу получить к нему доступ или изменить его.

Кто-нибудь знает, как я могу установить / отобразить эти два пользовательских элемента управления по вертикали?

Answer 1

Данг, только что нашел ответ сам.Мне пришлось добавить эти стили CSS в оба элемента управления:

controlUI.style.cssFloat = 'left';

Теперь элементы управления отображаются горизонтально (рядом друг с другом).