Open infowindow by clicking a button in AngularJS

Question

I have used google map using AngularJs which is working fine. However, on clicking any marker infowindow opens but I need to open it by clicking a radio button outside the map, here is the code sample

HTML

<ng-map default-style="true" center="[24.8615, 67.0099]" zoom="11" scroll-wheel="false" zoom-to-inculude-markers="auto">
<info-window id="rider">
    <div ng-non-bindable="">
        {{vm.store.name}} <br/>
        {{vm.store.title}}<br/>
    </div>
</info-window>
<marker ng-repeat="(id, store) in vm.stores" id="{{id}}" icon="../assets/images/rider.png"
        position="{{store.position}}"
        on-click="vm.showStore(event, id)"></marker>

JavaScript/AngularJs

vm.stores = [
       {position: [24.8820869, 67.06881520000002], title: 'Bahadrubad'},
       {position: [24.8753973, 67.04096709999999], title: 'Mazar e Quaid'},
       {position: [24.8758, 67.0230], title: 'Karachi Zoo'},
       {position: [24.8532941, 67.01622309999993], title: 'Saddar Town'}
   ];

NgMap.getMap().then(function (map) {
        vm.map = map;
    });

    vm.showStore = function (e, storeId) {
        vm.store = vm.stores[storeId];
        vm.map.showInfoWindow('rider', this);
    };

Answer 1

Once the radio button list is initialized:

<label data-ng-repeat="store in vm.stores">
            <input type="radio" name="storeList" ng-model="store" ng-value="{{store}}"   ng-change='vm.showStoreExt({{$index}})' />
                {{store.title}}
        </label>

you could specify event handler to display info window as shown below:

vm.showStoreExt = function (index) {
      vm.store = vm.stores[index];
      var marker = vm.map.markers[index];
      vm.map.showInfoWindow('rider', marker);
    };

Working example

angular.module('mapApp', ['ngMap'])

  .controller('mapController', function (NgMap) {
    var vm = this;
    vm.stores = [
      { position: [24.8820869, 67.06881520000002], title: 'Bahadrubad' },
      { position: [24.8753973, 67.04096709999999], title: 'Mazar e Quaid' },
      { position: [24.8758, 67.0230], title: 'Karachi Zoo' },
      { position: [24.8532941, 67.01622309999993], title: 'Saddar Town' }
    ];

    NgMap.getMap().then(function (map) {
      vm.map = map;
    });


    vm.showStoreExt = function (index) {
      vm.store = vm.stores[index];
      var marker = vm.map.markers[index];
      vm.map.showInfoWindow('rider', marker);
    };

    vm.showStore = function (e, storeId) {
        vm.store = vm.stores[storeId];
        vm.map.showInfoWindow('rider', this);
    };




  });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>


<div ng-app="mapApp" ng-controller="mapController as vm">

        <label data-ng-repeat="store in vm.stores">
            <input type="radio" name="storeList" ng-model="store" ng-value="{{store}}"   ng-change='vm.showStoreExt({{$index}})' />
                {{store.title}}
        </label>

        <ng-map default-style="true" center="[24.8615, 67.0099]" zoom="11" scroll-wheel="false" zoom-to-inculude-markers="auto">
            <info-window id="rider">
                <div ng-non-bindable="">
                    {{vm.store.name}} <br/> {{vm.store.title}}
                    <br/>
                </div>
            </info-window>
            <marker ng-repeat="(id, store) in vm.stores" id="{{id}}" position="{{store.position}}" on-click="vm.showStore(event, id)"></marker>
        </ng-map>


 </div>