onclick in InfoWindow content

I got a little problem in my code, I try to launch a function in the content of a InfoWindow in javascript, and, I don’t know why, I got difficulties to do that. I’ve looked at a lot of topics about it on stackoverflow and elsewhere, applied exactly what I’ve seen on these topics but…

Note: this is a part of my entire code, this is why “infobulle” doesn’t seem to be declared. In the same way, “this.jsonActivity” and “mapView” are correctly initialized before this part of code.

Here, “newActivity” in parameter is a Marker from the google maps API, and what I’m trying to do is to display an InfoWindow next to the current marker when we click on it. Everything’s ok, the entire text is correctly displayed in the InfoWindow but the problem is that I can’t call the “alertMessage()” method when I click on the button, nothing happens… and I really don’t know why !!

Well, here’s my code, thank you for your help 🙂

google.maps.event.addListener(newActivity, "click", function() {
    if(infobulle)
        infobulle.close();

    var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
        this.jsonActivity.description + '<br/>' +
        '<h3>Routing:</h3>' +
        '<button onclick="alertMessage()">Click me</button>';

    infobulle = new google.maps.InfoWindow({
        content: contenu,
        maxWidth: 120
    });
    infobulle.open(mapView, this);

    function alertMessage() {
        alert("alertMessage");
    }
});

EDIT:

this is perfect, it’s working now!

I’ve tried all of your solutions and only one is working for me, the one that declares the function as global, thanks to Dr.Molle!

Now I put what I’ve tried for the two other solutions:

google.maps.event.addListener(newActivity, "click", function() {

    if(infobulle)
        infobulle.close();

    var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
        this.jsonActivity.description + '<br/>' +
        '<h3>Routing:</h3>' +
        '<button id="myAlert">Click me</button>';

    infobulle = new google.maps.InfoWindow({
        content: contenu,
        maxWidth: 120
    });
    infobulle.open(mapView, this);

    document.getElementById("myAlert").addEventListener(function() {
        alert("something");
    });
});

For the solution suggested by Jared Smith. It’s like before, everything is correctly displayed except for the button when I click on it, nothing happens.

And for the solution suggested by Alexander:

google.maps.event.addListener(newActivity, "click", function() {

    if(infobulle)
        infobulle.close();

    var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
        this.jsonActivity.description + '<br/>' +
        '<h3>Routing:</h3>' +
        '<button onclick="(function() {
            alert("something");
        })();">Click me</button>';

    infobulle = new google.maps.InfoWindow({
        content: contenu,
        maxWidth: 120
    });
    infobulle.open(mapView, this);
});

and this time, even the elements where I’m supposed to click the button don’t appear…

Well for these two solutions, maybe I don’t have used them correctly… so if you find something to say, please go ahead 🙂

EDIT(2): Okay now I’ve got an other question: if I want to put a variable as parameter of the function, how am I supposed to do this? Just typing the name of the variable as parameter does not working.

I’ve tried:

var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
    this.jsonActivity.description + '<br/>' +
    '<h3>Routing:</h3>' +
    '<button onclick="alertMessage('something')">Click me</button>';
window.alertMessage = function(thing) {
    alert(thing);
};

which is working because I put directly the string as parameters.

But if I declare:

var text = "something";

var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
    this.jsonActivity.description + '<br/>' +
    '<h3>Routing:</h3>' +
    '<button onclick="alertMessage(text)">Click me</button>';
window.alertMessage = function(thing) {
    alert(thing);
};

It’s not working anymore, do you know how to fix this?

Answer

make the function global accessible(currently it isn’t):

window.alertMessage=function() {
    alert("alertMessage");
}

Advertisement

Answer