Google map marker click event using angular

Question

I want create a click event using angular js google map api.

On click on the marker I want to call a function without opening the info window.

How can I do this ?

$scope.map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 12,
                        center: { lat: parseFloat(Center_lat) , lng: parseFloat(center_lang) }
                    });

                    $scope.infowindow = new google.maps.InfoWindow({
                        // content: ''
                    });

                    angular.forEach($scope.panoramas, function(value, index) {
                        var latLang = $scope.panoramas[index].project_latLng ;
                        // console.log(latLang)
                        var LatLngArr = latLang.split(",");
                        var lat  = LatLngArr[0];
                        var lang = LatLngArr[1];
                        console.log("lat " ,lat);

                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng(parseFloat(lat), parseFloat(lang)),
                            map: $scope.map,
                            icon:"images/map-circle.png",
                            draggable:true,
                            label: {
                                color: 'black',
                                fontWeight: 'bold',
                                text: $scope.panoramas[index].panoId,
                            },

                            title: $scope.panoramas[index].panoId
                        });

                        var content = '<a ng-click="ShowCenterPano(' + index + ')" class="btn btn-default">View details</a>';

                        var compiledContent = $compile(content)($scope)

                        google.maps.event.addListener(marker, 'click', (function(marker, content, scope) {
                            return function() {
                                scope.infowindow.setContent(content);
                                scope.infowindow.open(scope.map, marker);
                            };
                        })(marker, compiledContent[0], $scope));


                        $scope.ShowCenterPano = function(index) {
                          // alert(JSON.stringify($scope.panoramas[index]));
                        }

Here Info window is opening. How can I remove the info window and directly call the ShowCenterPano() function.

Answer 1

Everything you want to happen when you click on the marker is inside the listener. I think you are making your code needlessly complicated. Just put a listener on your marker marker.addListener('click', function() {}); and in this function you run ShowCenterPano()

And the reason the infowindow is opening is because you ask it to open with this line of code scope.infowindow.open(scope.map, marker);