CODEWITHSUNDEEP
javascripthtmlgoogle-maps
hannes
hannes

Reputation: 537

Google Maps Infowindow Button onclick

Hey guys i want to create for each Marker on a map an onclickEvent with an Infowindow. In that Infowindow there should be a Button. If i click on the Button a function with parameters should be executed. But this does not work...

My Code:

var infowindow;
google.maps.event.addListener(marker,"click",function() {
var content="<input type='button' name='Edit' value='Edit' onclick='"+editPreference(preference)+"' id='NearbyEditButton"+counterNearby+"'>"
                                                                + "<input type='button' name='Delete' value='Delete' onclick='deleteMarker(\"preference\")' id='NearbyDeleteButton"+counterNearby+"'>"
                                                                + "<br>"
                                                                + "</form>";
infowindow = new google.maps.InfoWindow();  
infowindow.setContent(content);
infowindow.open(map, marker);

this is the preference Object

var preference = {
                            type : "NEARBY",
                            marker : marker,
                            position : latLng,
                            dPar : 10,
                            cPar : 10,
                            measureFn : "Euklidische Distanz",
                            label : "Nearby" + counterNearby,
                            id : "nearby" + counterNearby,
                            deleteButton: "NearbyButton"+counterNearby,
                            editButton: "EditButton"+counterNearby
                        };

and this is the function to execute with the Preference Parameter

function editPreference(preference) {
alert(preference.type);
deleteFromArray(preferences, preference);
if (!isNaN(document.getElementById("dPar").value)) {
    preference.dPar = document.getElementById("dPar").value;
} else {
    alert("Please enter a number for d-Paramater");
}

if (!isNaN(document.getElementById("cPar").value)) {
    preference.cPar = document.getElementById("cPar").value;
} else {
    alert("Please enter a number for c-Paramater");
}
preference.label = document.getElementById("Lab").value;
var d = document.getElementById("dist");
var d1 = d.options[d.selectedIndex].text;
preference.measureFn = d1;
alert(d1);
preferences.push(preference);

}

Upvotes: 0

Views: 5368

Answers (2)

Animesh Mukherkjee
Animesh Mukherkjee

Reputation: 430

I had a similar problem, my solution was to create the content string using the document APIs of Javascript. Using this you can add methods in the runtime and you don't need to worry about scopes. For example, for the following input button with name Edit, use the code below to make it.

// <input type='button' name='Edit' value='Edit' onclick='editPreference("+preference+")' id='NearbyEditButton"

// Creating input element using javascript APIs
   var input = document.createElement('input');
   input.setAttribute('type', 'button');
   input.setAttribute('value','Edit');
   function editPreference(preference){ //your code here }
   google.maps.event.addDomListener(input, "click", editPreference);

I just don't know in this case how to pass the preference object to the editPreference function.

Upvotes: 1

geocodezip
geocodezip

Reputation: 161404

You probably want something like this:

google.maps.event.addListener(marker,"click",function() {
  var content="<input type='button' name='Edit' value='Edit' onclick='editPreference("+preference+")' id='NearbyEditButton"+counterNearby+"'>"
                                                                + "<input type='button' name='Delete' value='Delete' onclick='deleteMarker(\"preference\")' id='NearbyDeleteButton"+counterNearby+"'>"
                                                                + "<br>"
                                                                + "</form>";
  infowindow = new google.maps.InfoWindow();  
  infowindow.setContent(content);
  infowindow.open(map, marker);
});

But hard to tell for sure without the editPreference function or an idea of how "preference" is defined and used.

Upvotes: 3

Related Questions