Google Maps Event Listener jQuery

Question

OK, here is, what I'm doing at the Moment:

when loading the page, I do an Ajax request to get a json-object with location Informations.

with these informations i initialize the google map an set markers. Here is the Code:

    $(document).ready(function()  {

//--- Ajax Request ------------------------------------------------------------------------------------------------------------------------
            $.ajax({
                dataType: "json",
                url: "karte-e.php",
                success: function(msg) {
                    initialize(msg);
                }
            });
//--- Ende Ajax Request ------------------------------------------------------------------------------------------------------------------------                

//--- Funktionen Google Maps API ------------------------------------------------------------------------------------------------------------------------   
            function initialize(json) {
                var mapProp = {
                    center:new google.maps.LatLng(51.508742,-0.120850),
                    zoom:2,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                };
                map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
                setMarkers(map, json);


            }

            function setMarkers(map, locations) {

                    var image_normal = {
                        url: 'Pins/pin-blau.png',
                        size: new google.maps.Size(32, 32),
                        origin: new google.maps.Point(0,0),
                        anchor: new google.maps.Point(0, 32)
                    };

                    var image_neu = {
                        url: 'Pins/pin-rot.png',
                        size: new google.maps.Size(32, 32),
                        origin: new google.maps.Point(0,0),
                        anchor: new google.maps.Point(0, 32)
                    };

                    var shape = {
                        type: 'rect',
                        coords: [5, 1, 27, 32]
                    };


                    for (var i = 0; i < locations.Standorte.length -1; i++) {

                        var myLatLng = new google.maps.LatLng(locations.Standorte[i].lat, locations.Standorte[i].lng);
                        var marker_normal = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            icon: image_normal,
                            shape: shape,
                            title: locations.Standorte[i].Titel,
                            zIndex: i
                        });
                    }

                    var myLatLng = new google.maps.LatLng(locations.Standorte[locations.Standorte.length - 1].lat, locations.Standorte[locations.Standorte.length - 1].lng);
                    var marker_neu = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            icon: image_neu,
                            shape: shape,
                            title: locations.Standorte[locations.Standorte.length - 1].Titel,
                            zIndex: locations.Standorte.length - 1
                        });


                }
//--- Ende Funktionen Google Maps API ------------------------------------------------------------------------------------------------------------------------                      

            return false;
//--- Ende $(document).ready() ------------------------------------------------------------------------------------------------------------------------ 
});

what i want to do, is to create an event listener, which is triggered by a Mouse Click on a Marker. My Problem is, that i'm very new to jQuery and I don't know, where to put my google.maps.event.addListener(marker, 'click', function(){}. All my trys failed. Hope,you can help me.

Answer 1

You would need to do something like this:

google.maps.event.addListener(marker, 'click', function() {
    alert("Hello World");
});

Where marker is the reference to the marker you created (of type google.maps.Marker).

So, you do it whenever you want, but you'll need a valid google.maps.Marker object, ideally you'll want to do it promptly after creating your marker.

So, updating your code to the following should work:

    $(document).ready(function()  {

//--- Ajax Request ------------------------------------------------------------------------------------------------------------------------
            $.ajax({
                dataType: "json",
                url: "karte-e.php",
                success: function(msg) {
                    initialize(msg);
                }
            });
//--- Ende Ajax Request ------------------------------------------------------------------------------------------------------------------------                

//--- Funktionen Google Maps API ------------------------------------------------------------------------------------------------------------------------   
            function initialize(json) {
                var mapProp = {
                    center:new google.maps.LatLng(51.508742,-0.120850),
                    zoom:2,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                };
                map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
                setMarkers(map, json);


            }

            function setMarkers(map, locations) {

                    var image_normal = {
                        url: 'Pins/pin-blau.png',
                        size: new google.maps.Size(32, 32),
                        origin: new google.maps.Point(0,0),
                        anchor: new google.maps.Point(0, 32)
                    };

                    var image_neu = {
                        url: 'Pins/pin-rot.png',
                        size: new google.maps.Size(32, 32),
                        origin: new google.maps.Point(0,0),
                        anchor: new google.maps.Point(0, 32)
                    };

                    var shape = {
                        type: 'rect',
                        coords: [5, 1, 27, 32]
                    };


                    for (var i = 0; i < locations.Standorte.length -1; i++) {

                        var myLatLng = new google.maps.LatLng(locations.Standorte[i].lat, locations.Standorte[i].lng);
                        var marker_normal = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            icon: image_normal,
                            shape: shape,
                            title: locations.Standorte[i].Titel,
                            zIndex: i
                        });
                        (function(marker){
                            google.maps.event.addListener(marker, 'click', function(){
                                // you can use the variable marker here to access the marker.
                            }); 
                        })(marker_normal);
                    }

                    var myLatLng = new google.maps.LatLng(locations.Standorte[locations.Standorte.length - 1].lat, locations.Standorte[locations.Standorte.length - 1].lng);
                    var marker_neu = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            icon: image_neu,
                            shape: shape,
                            title: locations.Standorte[locations.Standorte.length - 1].Titel,
                            zIndex: locations.Standorte.length - 1
                        });
                        (function(marker){
                            google.maps.event.addListener(marker, 'click', function(){
                                // you can use the variable marker here to access the marker.
                            }); 
                        })(marker_neu);


                }
//--- Ende Funktionen Google Maps API ------------------------------------------------------------------------------------------------------------------------                      

            return false;
//--- Ende $(document).ready() ------------------------------------------------------------------------------------------------------------------------ 
});