在Google Maps中將jQuery對話框附加到InfoBubble標記

Question

我使用Google Maps v3編碼。我想添加jQuery並將事件處理程序添加到infoBubble（一個可定製的infoWindow jscript擴展，我得到here）。

具體來說，我想讓用戶點擊infoBubble中的一個鏈接，並使用jQuery-UI彈出對話框。對話框將提示用戶輸入，隨後將存儲在MySQL中。

我一直堅持這一個月。這是我來到最接近的事：

Attach event handler to element inside google maps info bubble

下面是用於創建地圖標記我的javascript功能：

（注意：我們的想法是，如果安裝了事件處理程序infoBubble的作品，我會用jQuery-UI替換function() {alert("hi!");}，但它不起作用，我嘗試過使用「var str = 'onClick=formPopUp()';」，但是javascript不支持多個條目的提示對話框表單，另外，我也不知道如何在像formPopUp（）這樣的javascript函數內部有jQuery-UI調用，如果是混淆，很抱歉荷蘭國際集團）

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); 

     }); 

    } 

Answer 1

此字符串：

var str = 'id=user-creates'; 

不是在HTML中嵌入正確的格式。

它需要：

var str = "id='user-creates'";