Google Map Api v3：單擊infowindow中的按鈕時觸發一個動作

Question

我使用'rightclick'動作在地圖上添加標記。 每個標記都有其特定的infowindow，每個infowindow都有一個表單。

當我創建多個標記時，我的代碼只會觸發第一個infowindow值，而不是好的。

google.maps.event.addListener(map, 'rightclick', function(event) { 
    var marker = new google.maps.Marker({ 
    map: map, 
    draggable : true, 
    position: event.latLng, 
    animation: google.maps.Animation.DROP, 
    }); 

    var geocoder = new google.maps.Geocoder(); 

    geocoder.geocode({'latLng': event.latLng}, function(results, status) { 
    if(status == google.maps.GeocoderStatus.OK) { 
     var html = "<div class='infobox'>"; 
     html += "<p>"; 
     html += "<strong>Lieu : </strong>"; 
     html += results[0]['formatted_address']; 
     html += "</p>"; 

     html += "<p>"; 
     html += "<strong>Nombre de place (~) : </strong>"; 
     html += "<input type='text' class='form_input' name='nb_place' id='nb_place' />"; 
     html += "</p>"; 

     html += "<p>"; 
     html += "<strong>Point d'arrimage : </strong>"; 
     html += "<input type='checkbox' id='point_arrim' name='point_arrim' />"; 
     html += "</p>"; 

     html += "<input type='hidden' id='formatted_address' name='formatted_address' value='"+results[0]['formatted_address']+"' />"; 
     html += "<input type='hidden' id='geoloc_lat' name='geoloc_lat' value='"+event.latLng.nb+"' />"; 
     html += "<input type='hidden' id='geoloc_long' name='geoloc_long' value='"+event.latLng.ob+"' />"; 
     html += '<input type="button" onclick="saveData()" class="info_button" value="Ajouter l\'emplacement"/>' 
     html += "</div>"; 


     var infowindow = new google.maps.InfoWindow({ 
     map: map, 
     content : html 
     }); 
     infowindow.open(map, marker); 

     google.maps.event.addListener(infowindow, 'domready', function(){ 
     console.log("test"); 
     console.log($(this)); 
     }); 
    } 
    }); 
}); 

function saveData() { 
    var nb_place = escape(document.getElementById("nb_place").value); 
    var point_arrim = escape(document.getElementById("point_arrim").checked); 
    var formatted_address = document.getElementById("formatted_address").value; 
    var geoloc_lat = document.getElementById("geoloc_lat").value; 
    var geoloc_long = document.getElementById("geoloc_long").value; 

    if(!nb_place) nb_place = null; 

    var url = "phpsqlinfo_addrow.php?nb_place=" + nb_place + "&point_arrim=" + point_arrim + 
    "&formatted_address=" + formatted_address + "&geoloc_lat=" + geoloc_lat + "&geoloc_long=" + geoloc_long; 
    downloadUrl(url, function(data, responseCode) { 
    if (responseCode == 200 && data.length <= 1) { 
     infowindow.close(); 
     document.getElementById("message").innerHTML = "Location added."; 
    } 
    }); 
} 

事實上，我想動態地觸發與點擊infowindow按鈕相關的值。 我看了'domready'的行動，但無法弄清楚。

Answer 1

充分利用

var marker=[]; 
var infowindow=[]; 

在全球範圍內。並嘗試

google.maps.event.addListener(map, 'rightclick', function(event) { 
     marker.push(new google.maps.Marker({position: event.latLng, map: map})); 
     var markIndex = marker.length-1; 
    ....................... 
    .......................... 
    infowindow[markIndex] = new google.maps.InfoWindow({ 
      content: html 
    }); 
    infowindow[markIndex].open(map,marker[markIndex]); 

    //You can also add the info window again while clicking on marker if you need 

    google.maps.event.addListener(marker[markIndex], 'click', function(e) { 
      infowindow[markIndex].open(map,marker[markIndex]); 
    }); 
}); 

而且在創建HTML varibale信息窗口索引添加到它

html += '<input type="button" onclick="saveData('+markIndex+')" class="info_button" value="Ajouter l\'emplacement"/>'; 

現在我們可以關閉特定的信息窗口中你SAVEDATA功能

function saveData(index) { 
........ 
if (responseCode == 200 && data.length <= 1) { 
      infowindow[index].close(); 
      document.getElementById("message").innerHTML = "Location added."; 
     } 
} 

你可以看到創建多個infowindows的工作演示here