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

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

Не требуется: вертикальное позиционирование пользовательских элементов управления

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

Требуется: отображается горизонтально

Определения 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 = ƈpx solid #fff'
        controlUI.style.borderRadius = Ɖpx'
        controlUI.style.boxShadow = Ɔ 2px 6px rgba(0,0,0,.3)'
        controlUI.style.cursor = 'pointer'
        controlUI.style.marginBottom = Ǝpx'
        controlUI.style.marginRight = ཆpx'
        controlUI.style.paddingTop = Ɖpx'
        controlUI.style.paddingLeft = Ɖpx'
        controlUI.style.paddingRight = Ɖpx'
        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 вокруг обоих настраиваемых элементов управления, но у него нет идентификатора, поэтому я не могу его получить или изменить.

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

Всего 1 ответ


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

 controlUI.style.cssFloat = 'left'; 

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


Есть идеи?

10000