Google Maps v3 по умолчанию контролирует смещение положения

Question

Я хочу, чтобы положение элементов управления Google Maps v3 по умолчанию было «вверху слева», но я хочу, чтобы оно оставалось 300 пикселейЯ не нашел, как это сделать с помощью API, не так ли?Я думаю, что мне, возможно, просто нужно захватить div и сделать это с помощью raw javascript / jQuery.

Answer 1

Есть гораздо более простое решение.Я получил идею из описания следующего запроса функции Разрешить точную контрольную позицию с использованием пикселей (за которые вы можете голосовать).Вот реализация:

JavaScript:

var emptyDiv = document.createElement('div');
emptyDiv.className = 'empty';
emptyDiv.index = 0;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(emptyDiv);

CSS:

.empty {
    width: 300px;
}

А вот JSFiddle этого.

Answer 2

Это может быть не идеально, но способ, которым я это исправил, был с помощью jQuery.

Здесь я собираю обертку элемента управления div, в которой нет ничего уникального, захватывая уникальный элемент в DOM и возвращаясь к главному элементу контроллера. Затем я обертываю его специальным элементом, ссылка на который сохраняется для последующего использования. Первоначально я просто переместил оболочку элемента управления, но он переместился назад влево: 0 при наведении курсора. Оберните его специальным div и смещением, которое отлично работает, и новый div div можно использовать позже.

var $controls = {}, _loaded = false;
// define the control wrapper for use later, map hasn't loaded yet

google.maps.event.addListener(map, 'idle', function(event) {
// map is idle

    if(!_loaded){ _loaded = true;
    // only runs on first idle

        var control_move = setInterval(function(){
        // look for loaded controller

            var img = 'img[src="http://maps.gstatic.com/mapfiles/mapcontrols3d7.png"]';

            if($(img).size() == 5){
            // loaded controller found

                clearInterval(control_move);
                // stop looking for loaded controller

                $(img+':first').parent().parent().parent().parent()
                    .wrap('<div id="control-offset" style="position: absolute; left: 300px; top: 0; width: 78px; height: 340px; overflow: hidden; z-index: 1000;"/>');
                $controls = $('#control-offset');
                // I wrap the controller wrap and offset that so it doesn't jump around

            }

        }, 100);
        // looping every tenth of a second

    // more initial map load code

    }

    // more idle map code

});

Бум. Скажите, имеет ли это смысл.

Answer 3

Если вы хотите установить вертикальное верхнее поле, используя пример psxls, просто используйте его следующим образом:

function initialize() {
    var options = { 
        zoom: 8, 
        center: new google.maps.LatLng(-34, 150),
        zoomControl: true,
        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.LEFT_TOP
        },
        zoomControl: true,
        zoomControlOptions: {
             style: google.maps.ZoomControlStyle.LARGE,
             position: google.maps.ControlPosition.LEFT_TOP
        }
    };
    map = new google.maps.Map(document.getElementById('map'), options);

    var emptyDiv = document.createElement('div');
    emptyDiv.className = 'map_controls';
    emptyDiv.index = 0;
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(emptyDiv);
}

google.maps.event.addDomListener(window, 'load', initialize);

http://jsfiddle.net/54LLm/19/