Show - Hide - AngularJs

[mauritosuarez]

Buenas, estuve dando vueltas con este problema y no pude dar con la solución ya que también estoy empezando a usar el maravilloso framework angularjs, estoy usando la libreria Onsen - components

Tengo un mapa, donde muestro varios puntos de interes, la idea es, al hacer click en un punto de interes, debajo del mapa me muestre el detalle de este punto, como por ejemplo las coordenadas, el titulo y el contenido. Paso a mostrar mi codigo.

codigo map.html

Código HTML:

<ons-navigator ng-controller="MapController">
   <ons-page>
       <ons-toolbar>
            <div class="left"><ons-back-button onclick="slidingMenu.setMainPage('settings.html')"></ons-back-button></div>
            <div class="center">
                MAPS
            </div>
       </ons-toolbar>
        
        <div id="map_canvas"></div>
 
        <!-- Acá iria el detalle al hacer click sobre un punto de interes en el mapa -->
        <div ng-show="false" id="detalle" style="margin-top: 6px; border: solid 1px #eee; width: 100%; height: 40%;">
            <ons-list>
                <ons-list-item modifier="chevron" class="list-item-container">
                  <div class="list-item-left">
                    <img src="images/pic.png" class="avator">
                  </div>
                  <div class="list-item-right">
                    <div class="list-item-content">
                      <div class="name">Daniel
                        <span class="lucent">@Danny</span>
                      </div>
                      <span class="desc">Hi, how are you? Glad to hear you are interested in our project.</span>
                    </div>
                  </div>
                </ons-list-item>
            </ons-list>
        </div>
    </ons-page>
</ons-navigator>
 

codigo controller.js

Código Javascript:

(function() {
    var app = angular.module('myApp', ['onsen']);
 
     //Map controller
    app.controller('MapController', function($scope, $timeout, $http){
 
        $scope.map;
        $scope.markers = [];
        $scope.markerId = 1;
        $scope.marker;
        $scope.geolocate;
        $scope.content;
        $scope.infowindow;
        $scope.positionFarm;
        $scope.contentFarm;
        $scope.responsePromise;
        $scope.url;
        $scope.datos = {};
          
        //Map initialization
        $timeout(function(){
         
            var myOptions = {
                zoom: 15,
                //center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            $scope.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
            navigator.geolocation.getCurrentPosition(function(position) {
        
                $scope.geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 
                $scope.map.setCenter($scope.geolocate);
                
                function setMarker(map, position, title, content) {
                    var marker;
                    var markerOptions = {
                        position: position,
                        map: $scope.map,
                        title: title,
                        icon: 'images/pic.png'
                    };
 
                    $scope.marker = new google.maps.Marker(markerOptions);
                    $scope.markers.push($scope.marker); // add marker to array
 
                    google.maps.event.addListener($scope.marker, 'click', function () {
                       /*** Hasta acá puedo mostrar un alert con la posición y el titulo
                         * Lo que tendría que hacer es hacer visible el div id="detalle" con el detalle del punto
                         * de interes.
                         ***/
 
                        ons.notification.alert({
                            message: position + " " + title
                        });
                        
                        return;
                    });
                    
                }
                
                setMarker($scope.map, new google.maps.LatLng(-34.566653, -58.562298), 'Aberturas 3 de febrero', 'Aberturas 3 de frebreo, abierto 24hs');
                setMarker($scope.map, new google.maps.LatLng(-34.569494, -58.588517), 'Club hipico Gral. San Martín', 'Club hipico Gral. San Martín, abierto de lunes a viernes');
                setMarker($scope.map, new google.maps.LatLng(-34.557518, -58.581524), 'Farmacia la placita', 'Farmacia la placita, abierta 24hs.');
                setMarker($scope.map, new google.maps.LatLng(-34.565752, -58.575730), 'Farmacia Maipú', 'Farmacia Maipú, abierta 24hs.');
                setMarker($scope.map, new google.maps.LatLng(-34.559285, -58.568606), 'Farmacia av. 101 9 de julio', 'Farmacia 9 de julio, abierta 24hs.');
                setMarker($scope.map, new google.maps.LatLng(-34.561841, -58.569289), 'Farmacia Almirante', 'abierta 24hs.');
                setMarker($scope.map, new google.maps.LatLng(-34.612691, -58.534079), 'Farmacia villa raffo', 'Abierto las 24hs, para lo que necesites');
                setMarker($scope.map, new google.maps.LatLng(-34.614399, -58.531352), 'Farmacia plus', 'Siempre mas para vos');
                
                $scope.marker = new google.maps.Marker({
                    position: $scope.geolocate,
                    map: $scope.map,
                    title: "Usted esta aquí!"
                });
                
            });
          
        },100);
 
     });
 
    })();
 

Desde ya gracias a todos por su tiempo.!!!