Кнопка пользовательского интерфейса jQuery в качестве пользовательского элемента управления API Карт Google (v3) - PullRequest
Новая
       15

Кнопка пользовательского интерфейса jQuery в качестве пользовательского элемента управления API Карт Google (v3)

1 голос
/ 18 июля 2011

Я хотел бы использовать кнопку пользовательского интерфейса jQuery в качестве пользовательского элемента управления в Google Maps API (v3), но у меня возникли некоторые проблемы. Все, что я получаю на своей карте, это простая старая кнопка HTML без каких-либо стилей jQuery. Я предполагаю, что когда вызывается метод jQuery UI button(), div, содержащий мою пользовательскую кнопку управления, еще не присоединяется к DOM. Вот фрагмент кода, содержащий базовую реализацию, которую я пытаюсь достичь: 

<!-- GOOGLE MAPS API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<!-- CUSTOM JQUERY UI -->
<link type="text/css" href="../jquery-ui-1.8.14.custom/css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../jquery-ui-1.8.14.custom/js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../jquery-ui-1.8.14.custom/js/jquery-ui-1.8.14.custom.min.js"></script>

<script>
    $(document).ready(function() {
        var map = new google.maps.Map(document.getElementById("map_canvas"), {
            center: new google.maps.LatLng(0, 0),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var controlDiv = document.createElement('div');
        var controlButton = document.createElement('button');
        controlButton.innerHTML = 'Control Button';         
        controlDiv.appendChild(controlButton);

        // Add 'div' containing button to MVCArray in desired position on map
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
        $('button').button();
    });
</script>

В моих информационных окнах я создаю вкладки jQuery после того, как событие 'domready' было запущено. Мне интересно, есть ли что-нибудь подобное для создания пользовательских элементов управления картой. Или есть какой-то другой прием, чтобы заставить это работать? Любая помощь или предложения будут оценены, спасибо!

Обновление 7/22/11

Я пытался дурачиться с событием MVCArray 'insert_at', изменяя строки кода сверху: 

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
$('button').button();

на следующее: 

google.maps.event.addListener(map.controls[google.maps.ControlPosition.RIGHT_BOTTOM], 'insert_at', function() {
    $('button').button();
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].insertAt(map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].length, controlDiv);

Этот метод немного более неуклюж, но он выглядел как способ отложить вызов метода jQuery button() до тех пор, пока элемент кнопки не будет вставлен в карту и присоединен к DOM. К сожалению, не повезло. Все еще не работает. Вероятно, какое-то простое решение мне не хватает!

Документация по методу insertAt() и событию 'insert_at' класса MVCArray находится здесь: http://code.google.com/apis/maps/documentation/javascript/reference.html#MVCArray

...