Xtykutl

I have taken on some code already in production and I have a problem with some markers not having a click event attached to them.

To try and get this working I have stripped back the code and just implemented the basic example shown in this page - https://developers.google.com/maps/documentation/javascript/examples/event-simple, inside the structure of my current code.

However, this doesn't work, the marker is set but the click event is not attached.

Attaching a click event to the map works.

Does anybody have any suggestions about what could be causing this?

init() {

    this.loadScript(`https://maps.googleapis.com/maps/api/js?client=${this.apiClient}`);

}



loadScript(url) {

    const script = document.createElement('script');



    script.type = 'text/javascript';



    script.src = url;

    document.getElementsByTagName('body')[0].appendChild(script);



    setTimeout(() => {

        this.initMap();

    }, 500);

}



initMap() {

    const myLatlng = {lat: -25.363, lng: 131.044};



    const map = new google.maps.Map(this.mapElement, {

        zoom: 4,

        center: myLatlng

    });



    const marker = new google.maps.Marker({

        position: myLatlng,

        map: map,

        title: 'Click to zoom'

    });



    map.addListener('center_changed', function() {

        // 3 seconds after the center of the map has changed, pan back to the

        // marker.

        window.setTimeout(function() {

            map.panTo(marker.getPosition());

        }, 3000);

    });



    marker.addListener('click', function markerClick() {

        map.setZoom(8);

        map.setCenter(marker.getPosition());

    });

}

I make a few change and works

const marker = new google.maps.Marker({

            position: myLatlng,

            map: map,

            title: 'Click to zoom',

            icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png'

        });



        map.addListener('center_changed', function () {

            // 3 seconds after the center of the map has changed, pan back to the

            // marker.

            window.setTimeout(function () {

                map.panTo(marker.getPosition());

            }, 3000);

        });



        marker.addListener('click', function () {

            map.setZoom(8);

            map.setCenter(marker.getPosition());

        });

        marker.setMap(map);