open a info window with event click on google maps with angular

Question

I have an app that I need that open an infowindow on a google map, to just show it for 1 second when I do click on the panel in the side bar. After this, it need not work anymore.

I have a list of the markers and information in the sidebar, when the user make a click in a some of these markers I need that the infowindow to be open.

(function(){
    angular.module('mapCtrl', ['presentacionService'])
        .controller('MapController', function($scope, Presentacion) {
            var self = this;
            function initialize() {
                var options = {
                    googleApiKey: '',
                    locationColumn: 'geometry',
                    map_center: [-16.494898, -68.133553],
                    locationScope: 'La Paz'
                };
                options = options || {};
                self.googleApiKey = options.googleApiKey || "";
                self.locationColumn = options.locationColumn || "geometry";
                self.locationScope = options.locationScope || "";
                self.defaultZoom = options.defaultZoom || 10;
                self.map_centroid = new google.maps.LatLng(options.map_center[0], options.map_center[1]);

                self.myOptions = {
                    zoom: self.defaultZoom,
                    center: self.map_centroid,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                self.map = new google.maps.Map($("#map")[0], self.myOptions);

                var infoWindow = new google.maps.InfoWindow();

                google.maps.event.addListener(map, 'click', function() {
                    infowindow.close();
                });

                $scope.markers = [];
                var createMarker = function (info){
                    var marker = new google.maps.Marker({
                        map: self.map,
                        position: new google.maps.LatLng(info.latitud, info.long),
                        title: info.nombre,
                        date: info.date,
                        imagen: info.imagen,
                        nombre_categoria: info.nombre_categoria
                    });
                    marker.content = '<div class="infoWindowContent">' + info.descripcion + '</div>';
                    google.maps.event.addListener(marker, 'click', function(){
                        infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                        infoWindow.open(self.map, marker);
                    });
                    $scope.markers.push(marker);
                };
                Presentacion.getAll().success(function (datos) {
                    for (var i = 0; i < datos.length; i++){
                        createMarker(datos[i]);
                    }
                });
                $scope.openInfoWindow = function(e, selectedMarker){
                    console.log('show something');
                    e.preventDefault();
                    new google.maps.event.trigger(selectedMarker, 'click' );
                };
            }
            google.maps.event.addDomListener(window, 'load', initialize);

        });
})();

an in the view:

 <div class="row list_special" ng-repeat="marker in markers | orderBy : 'date'">
                        <div class="panel-google-plus" ng-click="openInfoWindow($event, marker)">
                   </div>
</div>

Answer 1

I prepared a Plunker to simulate functionalities desired for your project. Here is the url: http://plnkr.co/edit/gIhNLQgfiiD4QfuQQOi4?p=preview

I have substituted your service Presentacion with a simple array places initialized in the MainCtrl (and also the markers is a property of MainCtrl scope but inherited by MapController):

$scope.markers = [];
$scope.places = [];
$scope.places.push({lat: 44.99758207, lng: 7.140598296999997, ...);

No other editing in your code and it is working as required: you can click on an item and it will open infowindow all the times you want.