title: Google map marker click event using angular
body: <p>I want create a click event using angular js google map api.</p>
  
  <p>On click on the marker I want to call a function without opening the info window.</p>
  
  <p>How can I do this ?</p>
  
  <pre><code>$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 = '&lt;a ng-click="ShowCenterPano(' + index + ')" class="btn btn-default"&gt;View details&lt;/a&gt;';
  
                          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]));
                          }
  </code></pre>
  
  <p>Here Info window is opening. How can I remove the info window and directly call the ShowCenterPano() function.</p>