谷歌地圖v3。 Infowindow與jQuery選項卡

Question

我是Gmaps編程的初學者。

我想創建一個InfoWindow，其中包含兩個選項卡，其中一個僅包含信息，另一個包含一些HTML表單（按鈕和文本）。

http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow/tabs.html

var checkText = "Coordinates"; 

var content = [ 
    '<div id="tabs">', 
    '<ul>', 
    '<li><a href="#tab_1"><span>One</span></a></li>', 
    '<li><a href="#tab_2"><span>Two</span></a></li>', 
    '</ul>', 
    '<div id="tab_1">', 
    '<p>Marker i:"</p>'+ 
    '<form id='button'>'+ 
     '<div>'+ 
     '<input type='submit' value='Submit' />'+ 
     '</div>'+ 
    '</form>', 
    '</div>', 
    '<div id="tab_2">', 
    '<p>Info: '+checkText+'</p>', 
    '</div>', 
    '</div>' 
].join(''); 

然後，該事件偵聽器：

google.maps.event.addListener(infoWindow, 'domready', function() { 
    $("#tabs").tabs(); 
}); 

google.maps.event.addListener(marker, 'click', function(event) { 
    infoWindow.setContent(content); 
    infoWindow.open(map, marker); 
}); 

的選項卡完美表現，也是按鈕，但我不知道如何把它關聯到一個動作，例如：

marker.draggrable = true; // letting the marker to move 
checkText = marker.getPosition(); // changing the tab info whenever marker moves 

我想這個問題與jquery-tabs無關，但與任何帶有html表單的infowindow。 謝謝。

// -------------------------

我會簡化我的問題。

我準備這個例子中，您可以在信息窗口找到一個「按鈕」： http://www.sipa.es/prueba_fer/index_prueba.html

我怎樣才能到該按鈕的動作聯繫起來？ 例如，改變變焦，打開一個新的窗口，等

感謝

Answer 1

標記對象有drag events：

• 阻力：當用戶拖動標記此事件反覆觸發。
• dragend：當用戶停止拖動標記時觸發此事件。
• draggable_changed：標記的可拖動屬性更改時會觸發此事件。
• dragstart：當用戶開始拖動標記時觸發此事件。

然後，當事件觸發

google.maps.event.addListener(marker, 'dragend', function(event) { 
    checkText = this.getPosition(); 
    content = [ 
     '<div id="tabs">', 
       '<ul>', 
        '<li><a href="#tab_1"><span>One</span></a></li>', 
        '<li><a href="#tab_2"><span>Two</span></a></li>', 
       '</ul>', 
      '<div id="tab_1">', 
       '<p>Marker i:"</p>'+ 
       '<form id="button">'+ 
        '<div>'+ 
         '<input type="submit" value="Submit" />'+ 
        '</div>'+ 
       '</form>', 
      '</div>', 
       '<div id="tab_2">', 
        '<p>Info: '+checkText+'</p>', 
       '</div>', 
     '</div>' 
    ].join(''); 

}); 

更新來更新您的內容：

好吧，你需要確保你趕上在信息窗口中的元素，當他們被附加到DOM 。 Infowindows有一個domready事件。我更新了示例中的函數以顯示此內容。另外，請記住回傳將重置地圖。你沒有說你是否需要一個回或沒有，所以我取消它使用e.preventDefault();

(function() { 
    var marker = new google.maps.Marker({ 
      map: map, 
      draggable: false, 
      position: new google.maps.LatLng(40.30, -3.71) 
    }); 
    var content = "<div id='tabs'>" + 
        "<form id='button'>" + 
        "<div>" + 
        "<input id='btn' type='submit' value='Submit'/>" + 
        "</div>" + 
        "</form>" + 
        "</div>"; 

    google.maps.event.addListener(marker, 'click', function (event) { 
      infoWindow.setContent(content); 
      infoWindow.open(map, this); 
      map.setCenter(this.getPosition()); 

    });  

    google.maps.event.addListener(infoWindow, 'domready', function (e) { 
      //attach the click event to the button. 
      document.forms.button.btn.onclick = function (e) { 
       e.preventDefault(); //cancels the post back. 
       var currentZoomLevel = map.getZoom(); 
       map.setZoom(currentZoomLevel - 2); //zoom out two levels 
      };  
    }); 

})();