Прикрепление диалогового окна jQuery к InfoBubble в маркере Google Maps

Я кодирую с помощью Google Maps v3. Я хотел бы добавить jQuery и прикрепить обработчики событий к infoBubble (настраиваемое расширение jscript для infoWindow, которое я получил здесь).

В частности, я хочу, чтобы пользователи щелкали ссылку в информационном пузыре и появлялась диалоговая форма с использованием jQuery-UI. Диалоговая форма предложит пользователям ввести данные, которые впоследствии будут сохранены в MySQL.

Я застрял с этим в течение месяца. Это было самое близкое, к чему я пришел:

Прикрепить обработчик событий к элементу внутри информационного пузыря Google Maps

Ниже моя функция javascript, используемая для создания маркеров карты:

(Примечание. Идея состоит в том, что если присоединение обработчика событий к infoBubble работает, я бы заменил function() {alert("hi!");} формой jQuery-UI. Но это не работает. Я пытался использовать "var str = 'onClick=formPopUp()'; ", но javascript не поддерживает диалоговые формы подсказок с несколькими записями. Кроме того, я действительно не знаю, как иметь вызовы jQuery-UI внутри функции javascript, такой как formPopUp(). Извините, если это сбивает с толку)

function createMarker(map, latlng, fields, name) {
      var str = "id='user-creates'";

      var html = "<b><font size='5'>" + fields["name"] + "</font></b>" + "</br>" + 
             "<font size='2'>" + fields["google_rating"] + " / 5.00" + "</font>" + "</br>" + 
                 "<font size='2'>" + fields["type"] + "</font>" + "</br>" + 
                 "<font size='2'>" + "Hours" + "</font>" + "</br>" + 
                 "</br>" + 
                 "</br>" +
                 "<font size='2'>" + "Top Reviews " + "(<i>" + fields["num_reviews"] + " Reviews</i>)" +  "</font>" + "</br>" + 
                 "<div " + str + ">" +  "Example</div>" + 
                 "</br>" + 
                 "</br>" + 
                 "<font size='2'>" + "Photos " + "(<i>0 Photos</i>)" + "</font>" + "</br>" +
                 "</br>" + 
                 "</br>" +
                 "<font size='2'>" + "Friends Who've Been Here " + "(<i>0 Friends</i>)" + "</font>" + "</br>" +
                 "</br>" + 
                 "</br>" +
                 "<font size='2'>" + fields["address"] + "</font>" + "</br>" + 
                 "<font size='2'>" + fields["phone_num"] + "</font>" + "</br>" + 
                 "<font size='2'><a href=" + fields["web_url"] + "Website" + "</a></font>";


      var marker = new google.maps.Marker({
            map: map,
            position: latlng
      });

      infoBubble = new InfoBubble({
            map: map,
            position: latlng,
            borderColor: '#D14836',
            borderWidth: 4,     
      });

      google.maps.event.addListener(marker, 'click', function() {
        infoBubble.setContent(html);

        google.maps.event.addListenerOnce(infoBubble, 'domready', function(){
             //jQuery code here
             google.maps.event.addDomListener($(infoBubble.getContent()).find('#user-creates')[0], 
                                'click', function() {alert("hi!")}); 

        });

        infoBubble.open(map, marker); 

        });

    }

google-maps javascript google-maps-api-3 infobubble jquery-dialog
person Yi Xiang Chong    schedule 16.01.2013    source источник
comment
Я не видел, чтобы тег <font> использовался какое-то время. Вместо этого вы можете использовать CSS.   -  person Seain Malkin    schedule 16.01.2013
comment
Это просто грубый прототип. Я планирую использовать CSS в будущем. Пока я просто хочу, чтобы появилось диалоговое окно. Спасибо хоть!   -  person Yi Xiang Chong    schedule 17.01.2013

Ответы (1)


arrow_upward
0
arrow_downward

Эта строка:

var str = 'id=user-creates';

Неправильный формат для встраивания в HTML.

Это должно быть:

var str = "id='user-creates'";
person geocodezip    schedule 16.01.2013
comment
Эй, geocodezip, на самом деле это была опечатка в моем сообщении. У меня был правильный формат, и он все еще не работает. - person Yi Xiang Chong; 17.01.2013
comment
Пожалуйста, сравните вашу версию с моей. - person geocodezip; 17.01.2013
comment
Эй, geocodezip, это смущает. Повторная опечатка. Я трижды проверил свой код, и да, у меня есть предложенный вами формат. Это все еще не работает. На этот раз информационный пузырь даже не открывается. Большое спасибо еще раз. - person Yi Xiang Chong; 19.01.2013