Lit-HTML Button Event Inside Google Marker Infowindow

Question

I am working on building a google map using LIT-HTML, I have a list of places that display on the map, when you click the marker an infowindow pops up. I want to add a button with a click event to this info window but I can not figure out how to tigger the button's click event inside the google marker infowindow. This is what I have tried:

function buildMarkerList() {
    this.markerList = this.places.map((place, i) => {

            const marker = new google.maps.Marker({

                position: new google.maps.LatLng(
                    parseFloat(place.latitude),
                    parseFloat(place.longitude),
                ),
                map: this.map
            });
            const infowindow = new google.maps.InfoWindow();

            marker.addListener('click',  () => {

                const content = `
                <div>
                    <h3>TITLE</h3>
                    <p>DESCRIPTION</p>
                   <button id="myButton" @click=${() => this.buttonEvent(place)}">button</button>
                </div>`;


                infowindow.setContent(content);

                infowindow.open(this.map, marker);

            });
            return marker;
        });
}

buttonEvent(place){
    // DO SOMETHING
}

I am expecting to click on a marker -> display an infowindow -> click the button in the infowindow -> call buttonEvent()

score 1 · Answer 1 · answered Aug 08 '19 at 06:59

Well if someone else finds themselves encountering this same problem, I found a solution ...

instead of creating my inforWindow html with a template literal I used vanilla js like so:

               const content = `
                    <div>
                        <h3>TITLE</h3>
                        <p>DESCRIPTION</p>
                    </div>`;

                const div = document.createElement("div");
                div.id = "container";
                div.innerHTML += content;

                const button = document.createElement("button");
                button.onclick = () => this.toGoogleMapDirections(place);
                button.innerHTML = 'Directions';

                div.appendChild(button);

                infowindow.setContent(div)

Lit-HTML Button Event Inside Google Marker Infowindow

1 Answers1